js中怎么用async和await實現同步

這篇“js中怎么用async和await實現同步”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“js中怎么用async和await實現同步”文章吧。

首先我們假設有一方法 readFile 可以讀取文件內容,  但是它是異步的。

var gen = function* (){
    var a = yield readFile('./a.txt');
    console.log(a.toString());
    var b = yield readFile('./b.txt');
    console.log(b.toString());
};

首先我們看下上面的代碼，如果我們將function 后面的 * 改成 async，將yield 改成 await，也就是下面的代碼

var gen = function async (){
    var a = await readFile('./a.txt');
    console.log(a.toString());
    var b = await readFile('./b.txt');
    console.log(b.toString());
};

是不是就是我們想要的同步寫異步操作了，第一種寫法就是 es6 中新支持的特性，Generator 函數，那什么是 Generator 函數呢，簡單來說Generator 函數有多種理解角度。語法上，首先可以把它理解成，Generator 函數是一個狀態機，封裝了多個內部狀態。執行 Generator 函數會返回一個遍歷器對象，也就是說，Generator 函數除了狀態機，還是一個遍歷器對象生成函數。返回的遍歷器對象，可以依次遍歷 Generator 函數內部的每一個狀態。上面的官方解釋看不懂沒關系。我們下面用例子演示下。

function* func(){ 
    console.log("one"); 
    yield '1'; 
    console.log("two"); 
    yield '2'; 
    console.log("three"); 
    return '3'; 
}
var f = func();
f.next(); // one // {value: "1", done: false} 
f.next(); // two // {value: "2", done: false} 
f.next(); // three // {value: "3", done: true} 
f.next(); // {value: undefined, done: true}

上面的代碼我們第一次調用 f.next() 時，函數 func 開始執行，并在執行到第一個 yield 時停住，并返回 yield 后面表達式的值，格式就是 {value: "1", done: false}  這種格式，value就是 yield 表達式的值
done 表示func函數是否執行完畢，此時如果我們如果接著調用 f.next(),類推將返回第二 yield 后面表達式的值，也就是 {value: "2", done: false}。我們可以繼續調用 f.next() 直至 done 變成 true， 它表示func函數執行完了。

function* func(){
    var a = yield '1';
    console.log(a);
    var b = yield '2';
    console.log(b);
}
var f = func();
f.next(); 
f.next('1');

f.next('2');我們繼續改造 func 函數為上面這種，在 next 分別傳入 1 和 2，我們會發現 console.log(a) 打印 1 ，console.log(b) 打印 2，也就是我們可以傳值到 Generator 函數中。
現在我們回到下面這段代碼上面來，然后重新設計下，并實現  readFile 函數。

var gen = function* (){
    var a = yield readFile('./a.txt');
    console.log(a.toString());
    var b = yield readFile('./b.txt');
    console.log(b.toString());
};

var readFile = function (fileName){
    return new Promise((resolve)=>{
        fs.readFile(fileName, (err, data)=>{
            resolve(data);
        })
    });
};

function run(fn) {
    var gen = fn();
    function next(data) {
        var result = gen.next(data);
        if (result.done) return;
        result.value.then((data)=>{
            next(data);
        })
    }
    next();
}

run(gen);

看上面的代碼我們用 promise  實現  readFile 函數，此時我們 yield 的返回值就是一個 promise 對象了，我們就可以使用， result.value.then((data)=>{next(data);})將 yield 返回的 value 值重新傳回 Generator 函數，這樣我們的 console.log(a.toString()); 就可以獲取到 a.txt 文件中的內容了， if (result.done) return; 可以用了判斷 Generator 函數 是否已執行完畢，用來結束循環調用。所以如果我們單獨去看 gen 函數，是不是就是將異步操作寫成同步語法了，如果我們將function 后面的 * 改成 async，將yield 改成 await也就是我們常用語法了。

以上就是關于“js中怎么用async和await實現同步”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。