JavaScript学习2——异步编程Promise&&async/await

1. 关系

asyncawait是基于promise函数es6新特性。async将函数包装成promise。await等待异步执行结束。

2. 用法

2.1 Promise

• promise对象在构建的时候会执行其参数中传入的函数excutor,此函数的执行是同步的。
  then中参数传递的函数的执行是异步的，then中有两个参数，分别传递两个函数，第一个函数是excutor中执行resolve(…)之后会自动执行的，第二个参数是excutor中执行reject(…)之后会自动执行的。
  then的回调函数中可以返回Promise对象或者一个值，从而构成链式编程，从上到下依次异步执行。返回一个值的时候会自动被包装成一个状态为fulfiled状态并且带此值的Promise对象。从而可以继续链式编程。
  resolve和reject中都可以填入参数，此参数会被下一个then接收，可以在then的回调函数中设置带一个参数data，这样就可以拿到参数。

new Promise((resolve, reject)=>{
	resolve(data);/reject(reason);
}).then((data)=>{...},(reason)=>{...})
[.then(...){}]

• 另一种执行方法

Promise.resolve(data).then((data)=>{...});

• 通过函数封装Promise对象

let func = function(){
	return new Promise((resolve,reject)=>{
	...;
	resolve(data);
});

func().then((data)=>{...});
}

• 处理错误的情况
  【注】Promise的then，catch，finally方法接收的参数都是函数。
  then可以接收两个带参函数
  分别对应resolve和reject。当then接收两个函数作为参数时，不用再用catch，即便用了catch也不会执行。
  当then接收一个函数作为参数
  默认为resolve执行的情况，此时需要用catch来判定reject执行的情况。
  finally接收一个不带参数的函数作为回调函数。

let func = function(){
    return new Promise((resolve,reject)=>{
        reject("出错");
    });
}

func().then((data)=>{
    console.log('suc');
},(reason)=>{
    console.log('then' + reason);
}).finally(()=>{console.log('finally')});

2.2 async/await

await只能在async修饰的函数中使用。

• 使用方式1——直接接收一个值

console.log(1);
async function func(){
    console.log(2);//await上面的语句依然是同步执行
    let data = await 3;//先将3装箱为Promise{3}，而后await解包提取出3
    //await下面的语句被当成一个微任务添加入队列
    console.log(4);
    console.log(data);
}
func();
console.log(5);

out：
1
2
5
4
3

• 使用方式2——await接收一个async函数的返回值

async function func(){
    return 1;//会被自动装箱成Promise{1}
}

async function ffunc(){
    console.log(2);
    let data = await func();
    console.log(3);
    console.log(data);
}

ffunc();
console.log(4);

• 使用方式3——接收Promise对象

let func = function(){
    return new Promise(resolve => {
        resolve(1);
    });
}

async function ffunc(){
    console.log(2);
    let data = await func();//promise对象被解包
    console.log(3);
    console.log(data);
}
ffunc();

• 接收到错误的情况

let func = function(){
    return new Promise((resolve,reject) => {
        reject("出错了");
    });
}

async function ffunc(){
    console.log(2);
    //使用try{}catch(e){...}包裹await及其下面的代码，可以实现对reject(data)的接收处理
    try{
        let data = await func();
        console.log(3);
        console.log(data);
    }catch(error){//error中即为reject中传递的参数
        console.log(error);
    }
}
ffunc();