什么是a s y n c / a w a i t
a s y n c 语法介绍
1.async 是一种编写异步代码的新方法。之前异步代码的方案是 callback 和 promise。2.async 是建立在 promise 的基础上，与promise一样也是非阻塞的。3.async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。
async function myAsyncFunction(){
try{
let result = await doSomething();
console.log(result);
}
catch(error){
console.log(error);
}
}
为什么要使用 a s y n c / a w a i t
接口请求的 Promise 写法
假设我们想请求一个接口，然后把响应的数据打印出来，并且捕获异常。用 Promise 是这样写。
function getData(url){
return axios(url)
.then(res=>{
let {data} = res;
console.log('fetch success',data);
})
.catch(err=>{
console.error('fetch failed',err);
})
}
接口请求的 Async 写法
假设我们想请求一个接口，然后把响应的数据打印出来，并且捕获异常。用 Async 是这样写。
async function getData(url){
try{
let {data} = await axios(url);
console.log('fetch success',data);
}
catch(err){
console.error('fetch failed',err);
}
}
虽然代码的行数差不多，但是代码看起来更加简洁，少了很多 then 的嵌套。请求一个接口数据，然后打印，就像你看到的，很简单。
用同步的思路写异步逻辑Promise 写法
假设我们需要连续请求两个接口，然后把请求1响应的数据用作请求2的参数。需要把响应的数据打印出来，并且捕获异常。用 Promise 是这样写。
function getData(){
return axios('http://aaa.com')
.then(res1=>{
console.log('res1',res1.data);
axios("http://bbb.com",{params:res1.data})
.then(res2=>{
console.log('res2',res2.data);
}).catch(err=>{
console.error('fetch failed',err);
})
}).catch(err=>{
console.error('fetch failed',err);
})
}
用同步的思路写异步逻辑Async 写法
假设我们需要连续请求两个接口，然后把请求1响应的数据用作请求2的参数。需要把响应的数据打印出来，并且捕获异常。用 Async 是这样写。
async function getData(){
try{
let res1 = await axios('http://aaa.com');
console.log('res1',res1.data);
let res2 = await axios("http://bbb.com",{
params:res1.data
})
console.log('res2',res2.data);
}catch(err){
console.error('fetch failed',err);
}
}
a s y n c 语法注意事项
异常处理t r y . . . c a t c h . . .
在 async 函数中，异常处理一般是 try...catch ，如果没有进行 try...catch ，await 表达式一旦reject ，async 函数返回的 Promise 就会 reject 。其实结合 Promise 来看，如果一个 Promise 状态敲定为 reject ，并且后续的 then 没有传入reject 函数，或者没有 catch ，那么就会抛出异常。
async function getData(url){
try{
let {data} = await axios(url)
console.log('fetch success',data);
}
catch(err){
console.error('fetch failed',err);
}
}
小心 await 阻塞
假如我们要同时发起两个数据请求，错误的实例可能是这样子。
async function getData(){
try{
let data1 = await axios("http://aaa.com");
let data2 = await axios("http://bbb.com");
console.log('res',data1,data2);
}catch(err){
console.error('fetch failed',err);
}
}
按照此实例，会先进行data1的请求。当data1请求返回后，再进行data2请求。
假如我们要同时发起两个数据请求，正确的实例是这样子。主要是利用了 Promise 一旦创建就立刻执行的特点进行处理。当然，我们也可以直接使用 Promise.all 的方式来处理。
async function getData(){
try{
let data1Promise = axios("http://aaa.com");
let data2Promise = axios("http://bbb.com");
let data1 = await data1Promise;
let data2 = await data2Promise;
console.log('res',data1,data2);
}catch(err){
console.error('fetch failed',err);
}
}
