javascript中async的用法詳解

這篇文章主要介紹了理解javascript async的用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

寫在前面

#本文將會實作一個順序讀取檔案的最優方法，實作方式從最古老的回呼方式到目前的async，也會與大家分享下本人對於thunk函式庫與co函式庫的理解。實現的效果：順序讀取出a.txt與b.txt，將讀出的內容拼接成為一個字串。

同步讀取

const readTwoFile = () => {
  const f1 = fs.readFileSync('./a.txt'),
    f2 = fs.readFileSync('./b.txt');
  return Buffer.concat([f1, f2]).toString();
};

這種方式最利於我們理解，程式碼也很清楚，沒有太多的嵌套，很好的維護，但是這種有著最大的問題，那就是性能，node所倡導的就是異步i/o來處理密集i/o，而同步的讀取，很大的程度上浪費著伺服器的cpu，這種方式的弊端明顯的大於好處，所以直接pass掉。 （其實node的任何非同步程式設計的解決方案的目標都是要達到同步的語義，非同步的執行。）

##利用回呼讀取

const readTwoFile = () => {
  let str = null;
  fs.readFile('./a.txt', (err, data) => {
    if (err) throw new Error(err);
    str = data;
    fs.readFile('./b.txt', (err, data) => {
      if (err) throw new Error(err);
      str = Buffer.concat([str, data]).toString();
    });
  });
};

利用回呼的方式，實現起來很簡單，直接的嵌套下去就好，但是這種情況下很容易造成的就是不易維護，難以讀懂的情況，最為極致的情況的就是回調地獄。

Promise實作

• const readFile = file => 
    new Promise((reslove, reject) => {
      fs.readFile(file, (err, data) => {
        if (err) reject(err);
        reslove(data);
      });
    });
  const readTwoFile = () => {
    let bf = null;
    readFile('./a.txt')
      .then(
        data => {
          bf = data;
          return readFile('./b.txt');
        }, 
        err => { throw new Error(err) }
      )
      .then(
        data => {
          console.log(Buffer.concat([bf, data]).toString())
        }, 
        err => { throw new Error(err) }
      );
  };

  Promise可以將橫向成長的回呼轉換為縱向成長，能解決一些問題，但Promise造成的問題就是程式碼冗餘，一眼看過去，全部是then，也不是很爽，但是相比於回呼函數嵌套來說，已經有了很大的提升。

• yield

• Generator很多語言都有，本質上是協程，下面就來看協程，線程，進程的區別與聯繫：

進程：作業系統中分配資源的基本單位

#執行緒：作業系統中調度資源的基本單位

#協程：比執行緒更小的執行單元，自帶cpu上下文，一個協程一個堆疊

一個行程中可能存在多個執行緒，一個執行緒中可能存在多個協程，行程、執行緒的切換由作業系統控制，而協程的切換由程式設計師本身控制。非同步i/o利用回呼的方式來應對i/o密集，同樣的使用協程也可以來應對，協程的切換並沒有很大的資源浪費，將一個i/o操作寫成一個協程，這樣進行i/o時可以吧cpu讓給其他協程。

js同樣支援協程，那就是yield。使用yield給我們直覺的感受就是，執行到了這個地方停了下來，其他的程式碼繼續跑，到你想讓他繼續執行了，他就是會繼續執行。

function *readTwoFile() {
  const f1 = yield readFile('./a.txt');
  const f2 = yield readFile('./b.txt'); 
  return Buffer.concat([f1, f2]).toString();
}

yield下的順序讀取呈現的也是一種順序讀取的方式，對於readFile來看有兩種不同的實作方式，

利用thunkify

const thunkify = (fn, ctx) => (...items) => (done) => {
  ctx = ctx || null;
  let called = false;
  items.push((...args) => {
    if (called) return void 0;
    called = true;
    done.apply(ctx, args);
  });
  try {
    fn.apply(ctx, items);  
  } catch(err) {
    done(err);
  }
};

thunkify函數就是一種柯里化得思想，最後的傳入參數done就為回呼函數，利用thunkify可以很輕鬆的實作yield函數的自動化流程：

const run = fn => {
  const gen = fn();
  let res;
  (function next(err, data) {
    let g = gen.next(data);
    if (g.done) return void 0;
    g.value(next);
  })();
};

利用Promise

const readFile = file => 
  new Promise((reslove, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) reject(err);
      reslove(data);
    });
  });
const run = fn => {
  const gen = fn();
  let str = null;
  (function next(err, data) {
    let res = gen.next(data);
    if (res.done) return void 0;
    res.value.then(
      data => {
        next(null, data);
      }, 
      err => { throw new Error(err); }
    );
  })();
};
run(readTwoFile);

上面兩種方式都可以達到自動執行yield的過程，那麼有沒有一種方式，可以兼容這兩種實現方式呢，tj大神又給了一個庫，那就是co庫，先來看下用法：

// readTwoFile的实现与上面类似,readFile既可以利用Promise也可以利用thunkify
// co库返回一个Promise对象
co(readTwoFile).then(data => console.log(data));

來看下co庫的實現，co庫預設會傳回一個Promise對象，對於yield之後的值（如上面的res.value），co庫會將其轉換為一個Promise。實作思想很簡單，基本上還是利用遞歸的方式，大體的想法如下：

const baseHandle = handle => res => {
  let ret;
  try {
    ret = gen[handle](res);
  } catch(e) {
    reject(e);
  }
  next(ret);
};
function co(gen) {
  const ctx = this,
    args = Array.prototype.slice.call(arguments, 1);
  return new Promise((reslove, reject) => {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    const onFulfilled = baseHandle('next'),
      onRejected = baseHandle('throw');

    onFulfilled();

    function next(ret) {
      if (ret.done) reslove(ret.value);
      // 将yield的返回值转换为Proimse
      const value = toPromise.call(ctx, ret.value);
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('yield type error'));
    }
  });
}

toPromise就是將一些型別轉換為Promise，從這裡我們可以看出的是可以將哪些型別放在yield後面，這裡就來看一個常用的：

// 把thunkify之后的函数转化为Promise的形式
function thunkToPromise(fn) {
  const ctx = this;
  return new Promise(function (resolve, reject) {
    fn.call(ctx, function (err, res) {
      if (err) return reject(err);
      if (arguments.length > 2) res = slice.call(arguments, 1);
      resolve(res);
    });
  });
}

最近Node已經支援了async/await，可以利用其來做非同步操作：

######終極解決##################

const readFile = file => 
  new Promise((reslove, reject) => {
    fs.readFile(file, (err, data) => {
      if (err) reject(err);
      reslove(data);
    });
  });
const readTwoFile = async function() {
  const f1 = await readFile('./a.txt');
  const f2 = await readFile('./b.txt');  
  return Buffer.concat([f1, f2]).toString();
};
readTwoFile().then(data => {
  console.log(data);
});

###async/await做的就是將Promise物件給串聯起來，避免了then的呼叫方式，程式碼非常的易讀，就是一種同步的方式。不再需要藉助其他外界類別庫（例如co庫）就可以優雅的解決回呼的問題######

以上是javascript中async的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！