promise/async/await

promise和async/await都是异步方案，promise是es6的新特性，而async/await是es7新出的特性。而对于async/await来说是基于promise的，他可以让我们更加优雅的写出代码，而替代then()的写法，例如：

 

const f = () => {

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(234);
    }, 2000);
  });
};
 
const testAsync = async () => {
  try {
    const t = await f();
    console.log(t);
  } catch (err) {
    console.log(err);
  }
};
 
testAsync();

在上述代码中，同样实现了代码的先后滞留执行问题；需要注意的是await必须写在async的作用域内；

一段话解释就是：await后面等待的是一个结果，不仅仅可以等待一个promise对象，也可以是返回值；async函数是返回的是一个promise对象，一般是在async里return返回值，如果没有返回值，它会返回 Promise.resolve(undefined)，但也不会阻塞后面的语句执行；await后面的值可以是async返回的promise，也可以是简单的function函数，它需要包含在async函数内；并且通过try{}catch{}来解决promise.reject()报错的问题。

promise和async/await都是实现异步的好方法，虽然现在还有兼容性的问题，但我们可以使用babel来转换es6和es7。

这段代码执行顺序结果：

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。
async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待 Promise  的结果出来，然后恢复async函数的执行并返回解析值（resolved）。
async/await的用途是简化使用 promises 异步调用的操作，并对一组 Promises执行某些操作。正如Promises类似于结构化回调，async/await类似于组合生成器和 promises。
await
await  操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

遇到 await 表达式时，会让 async 函数 暂停执行，等到 await 后面的语句（Promise）状态发生改变（resolved或者rejected）之后，再恢复 async 函数的执行（再之后 await 下面的语句），并返回解析值（Promise的值）

 

 

 

常用实列：
async created() {
    const userInfo = this.getUserInfo(); // 它们都会返回 Promise 对象
    const list = this.getNewsList();
    await userInfo;
    await list;
    // ...do something
}
// 如果有很多请求的情况下可以使用 Promise.all
async created() {
    Promise.all([this.getUserInfo(), this.getNewsList()]).then(()=> {
        // ...do something
    });
}

 

参考博主https://www.cnblogs.com/abey/p/7054527.html