Async 和await，Promise

Async 和await

注意点：

1最好把await命令放在try...catch代码块中

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}

2.多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

3.for await …of…

//for await ...of... 会等promise返回成功才执行下一步，即输出2000时，500也输出，再过一秒输出3000
let getTime=(time)=>{
	return new Promise(resolve=>{
		setTimeout(()=>{
			resolve(time)
		},500)
	})
}
async function test(){
    let arr = [getTime(2000),getTime(500),getTime(3000)]
    for await (let x of arr){
        console.log(x); 
    }
}

Promise

//按顺序调用方法 二一三
let btn =  document.getElementById("btn");
btn.onclick = function(){
     getData2().then(data=>{
        console.log(data)
        return getData1();
     }).then(data=>{
         console.log(data)
         return getData3()
     }).then(data=>{
         console.log(data)
     })

}
function getData1(){
   return  new Promise(function(resolve,reject){
            setTimeout(()=>{
                  resolve("我是一") ;
            },1000)
   })
}
function getData2(){
   return  new Promise(function(resolve,reject){
            setTimeout(()=>{
                  resolve("我是二");   
            },2000)
   })
}	  
function getData3(){
       return  new Promise(function(resolve,reject){
            setTimeout(()=>{
                  resolve("我是三");  
            },3000)
       })
}
//使用reduce依次执行
const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];
const finallyPromise = requestAry.reduce(
    (currentPromise, nextRequest) => currentPromise.then(() => nextRequest()),
    Promise.resolve(); // 创建一个初始promise，用于链接数组内的promise
);
注意：如果需要多个catch处理
fetchData().then((res) => {
  // 业务处理
  return fetchData2(res);
}).catch((err) => {
  // 错误处理并且返回 null
  return null;
}).then((res) => {
  if (res === null) {
    return;
  }
  // 业务处理
}).catch((err) => {
  // 错误处理
});
或者可以try.. catch范围大一些，太细的话会出现内外作用域不一致，需要提前声明变量