让前端飞Web前端之路前端xuexi

关于async/await的总结

2018-06-08  本文已影响74人  Mr无愧于心

---async和await是干什么用的---

---语义---

async 可以声明一个异步函数,此函数需要返回一个 Promise 对象。await可以等待一个 Promise 对象 resolve,并拿到结果。

function aaa(){
      return new Promise((resolve) => {//返回一个promise对象
          setTimeout(function(){//这里使用计时器模拟异步,也可以使用ajax,node异步读写等。。
              resolve(123);  //异步执行resolve函数
          },2000)
      })
  }
  async function getaaa(){
      let a=await aaa();//等待aaa函数的执行结果
      console.log(a)//拿到执行的返回值
  }
  getaaa()//调用这个函数

---async和await的用法---

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();//也可以把resolve写在sjax的sussess的回调中,都是异步调取
        }, time);
    })
};
var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');//立即打印start
    await sleep(3000);//等待三秒
    console.log('end');//三秒后打印end  
};

start();
var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模拟出错了,返回 ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); // 这里得到了一个返回错误
        // 所以以下代码不会被执行了,会走catch
        console.log('end');
    } catch (err) {
        console.log(err); // 这里捕捉到错误 `error`
    }
};
let count = ()=>{
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve(100);
        },500);
    });
}

let list = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([1,2,3]);
        },500);
    });
}
let getList = async ()=>{
    let result = await Promise.all([count(),list()]);
    return result;
}

//调用
getList().then(result=> {
    console.timeEnd('begin');  //begin: 505.557ms后才执行
    console.log(result);       //[ 100, [ 1, 2, 3 ] ]
}).catch(err=> {
    console.timeEnd('begin');
    console.log(err);
});

对比Promise,co,async/await的区别

上一篇下一篇

猜你喜欢

热点阅读