结合 async 异步函数 - 提升 Promise 的易用性

前言

• 前篇写了 promise 的使用的基本介绍，没看的朋友能够先预览一下如何用 Promise 自定义一个 GET 请求的函数

异步函数怎么工做的？

• 开局一张图

  

async function myAsyncFunc(){
    try {
        const fulfilledValue = await promise
    }catch(rejectValue){
        console.error('error:', rejectValue)
    }
}
复制代码

函数定义以前使用了 async 关键字，就能够在函数内使用 await。 当您 await 某个 Promise 时，函数暂停执行，直至该 Promise 产生结果，而且暂停并不会阻塞主线程。 若是 Promise 执行，则会返回值。 若是 Promise 拒绝，则会抛出拒绝的值。

如何用咱们的 async 改写咱们的 promise 代码

• 假如咱们这里须要获取一段文字数据

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}
复制代码

• 下面用 async 异步函数改写

async function logFetch(url) {
  try {
    const response = await fetch(url);
    
    // 打印成功获取的数据
    console.log(await response.text());
  }
  catch (err) {
  
    // 一样的抛出错误
    console.log('fetch failed', err);
  }
}
复制代码

去掉了万恶的 return 回调函数，是否是代码清爽不少了。

异步函数返回值

• 不管是否使用 await，异步函数都会返回 Promise。该 Promise 解析时返回异步函数返回的任何值，拒绝时返回异步函数抛出的任何值。

所以，对于：

// wait ms milliseconds
function wait(ms) {
  return new Promise(r => setTimeout(r, ms));
}

async function hello() {
  await wait(500);
  return 'world';
}
复制代码

…调用 hello() 返回的 Promise 会在执行时返回 "world"。

async function foo() {
  await wait(500);
  throw Error('bar');
}
复制代码

…调用 foo() 返回的 Promise 会在拒绝时返回 Error('bar')。

若是咱们想按照顺序获取数据啦？

• 直接使用 promise

function logInOrder(urls) {
  // 先使用咱们上面写好的 fetch 函数获取全部的数据
  const textPromises = urls.map(url => {
    return fetch(url).then(response => response.text());
  });

  // 而后用 reduce 把前面的 promises 一一的进行处理
  textPromises.reduce((chain, textPromise) => {
    return chain.then(() => textPromise)
      .then(text => console.log(text));
  }, Promise.resolve());
}
复制代码

• 若是使用 async 的话

async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
复制代码

这样是否是简洁不少，可是这样的话咱们的第二次获取数据要在第一次数据获取完毕才能开始，这样就牺牲了性能，可是咱们还有更好的方法

async function logInOrder(urls) {
  // 使用 map，和 async 改写，这样能够并行获取数据
  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
复制代码

上面的代码解决了咱们并行获取数据的时间问题，又能按照我么你的需求一一按顺序打印咱们的数据

使用其余语法

• 箭头函数

const mySync = async url=> {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}
复制代码

• 对象方法

const storage = {
  async getAvatar(name) {
    const cache = await caches.open('avatars');
    return cache;
  }
};

storage.getAvatar('jaffathecake').then(…);
复制代码

• 若是状况复杂你还可使用类来改写

class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jaffathecake').then(…);
复制代码

参考

• google-developer
• hackernoon