理解 es7 async await

说明

• 开始进行 react 项目，须要用到 es7 的 async 和 await 来替代之前的 promise 的方法q请求接口。在这里学习一下和你们一块儿分享。
• 适用：es6，es7初学者

---

一 理解 promise

• 须要明白 es7 的 await 和 async 是什么咱们想要看看 promise 是什么？

promise 的使用

老式的处理方法

• 在讲 promise 以前咱们也须要先了解一下，咱们平时在处理接口成功和失败的时候的处理方法以下。👇

function successCallback(result) {
  console.log("It succeeded with " + result);
}

function failureCallback(error) {
  console.log("It failed with " + error);
}

doSomething(successCallback, failureCallback);
复制代码

promise替代了下面这种旧式的函数，这种旧式函数须要两个回调函数，并最终调用处理成功事件或者处理失败事件的回调函数

用 promise 处理异步

• 一个 Promise 就是一个表明了异步操做最终完成或者失败的对象,新式函数返回一个你能够直接绑定回调函数的promise对象，来代替上面👆那种旧式的函数形式以下👇：

const promise = doSomething(); 
promise.then(successCallback, failureCallback);

// 固然你能够简单一点
doSomeThing().then(successCallback,failureCallback)
复制代码

promise 链式调用

• 若是咱们有多个异步操做，和须要在一个请求成功后再请求其余的接口。之前咱们是这样作的

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);
复制代码

这就是咱们熟知的回调地狱

• 一些常见的需求咱们不得不连续进行两个或者跟多的异步操做和请求，每个请求都须要在上个请求的成功的执行以后进行。咱们能够经过 promise chain 来完成这种需求。

doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);
复制代码

避免了回调地狱咱们如今这样处理

---

咱们花了些时间了解 promise 作铺垫，下面来了解 async 和await 的使用

二 async function

async 返回值

• async用于定义一个异步函数，该函数返回一个Promise。

await

• await 操做符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

概况

• 在 es7 的 draft 中提出 async 和 await来进一步的解决异步函数的问题。
• async function 声明将定义一个返回 AsyncFunction 对象的异步函数。

你还可使用 异步函数表达式 来定义异步函数。

• demo

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();
复制代码

详解👆的 demo

• 当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。
• async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。

async/await的用途是简化使用 promises 异步调用的操做，并对一组 Promises执行某些操做。正如Promises相似于结构化回调，async/await相似于组合生成器和 promises。

用 async 改写 promise

• promise chain

function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url)  // returns a promise
        .then(v => {
          return processDataInWorker(v); // returns a promise
        }); 
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}
复制代码

• async function

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}
复制代码

注意，在上述示例中，return 语句中没有 await 操做符，由于 async function 的返回值将隐式传递给 Promise.resolve。

写法

• 如今咱们这样的来书写异步请求

const signup = async () => {
            try {
                const resp = await signUp(parmas);
                doSometing(resp);
            } catch (error) {
                alert(error)；
            }
        }
    };
复制代码

async 函数异常

• 咱们直接在async函数中抛出一个异常，因为返回的是一个Promise，所以，这个异常能够调用返回Promise的catch()方法捕捉到。

let sayHi = async functionsayHi(){
    throw new Error('出错了');
}
sayHi().then(result=> {
    console.log(result);
}).catch(err=> {
    console.log(err.message);   //出错了
});
复制代码

• 和Promise链的对比：

咱们的async函数中能够包含多个异步操做，其异常和Promise链有相同之处，若是有一个Promise被reject()那么后面的将不会再进行。

引用

mdn promise&async function