es6之promise、async函数-蒲公英云

es6之promise、async函数

promise

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled(resolved)（已成功）和rejected（已失败）。

就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。then方法回调中需要获取异步操作中的值，并且依赖于promise对象的resolved或者rejected抛出的对象

const promise = new Promise(function(resolve, reject) {
  if (判断){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {//接受resolve成功状态数据
  // success
}, function(error) {//接受rejected失败状态数据
  // failure
});
function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done it you want do');//异步操作，
  });
}
timeout(1000).then((value) => {
  console.log(value);
});

Promise 新建后就会立即执行。

async函数

用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。

async function asyFun() {
    return '----';
}
asyFun().then(val => {
    console.log(val);// '----'
});
若 async 定义的函数有返回值，return '----';相当于Promise.resolve('----'),没有声明式的 return则相当于执行了Promise.resolve();

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

function sleep(second) {var oldDate=new Date();var newDate=0;
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
            newDate=new Date();
            console.log(newDate-oldDate);
        }, second);
    })
}
async function bugDemo() {
    await sleep(1000).then((value)=>{console.log(value)});
    await sleep(1000).then((value)=>{console.log(value)});
    await sleep(1000).then((value)=>{console.log(value)});
    console.log('clear the loading~');
}
bugDemo();
打印如下：
Promise {<pending>}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: undefined
VM72:4 1012
VM72:4 1004
VM72:4 1016
VM72:13 clear the loading~