从promise到await

很多人可能已经很熟练到使用promise了，部分甚至可以手写符合Promises/A+ 规范的实现。 但是其实很多时候，promise 并不是唯一的方法，下面会通过一些例子，来感受下await 的使用

例子

const url = 'http://127.0.0.1:3000/json';
fetch(url).then(
    (res)=>{
        return res.json()
    }
).then(
    (data)=>{
        console.log(data);
    }
).catch(
    (err)=>{
        console.error(err);
    }
)

很普通的一个场景，相信很多前端代码里都会有这样类似的代码，意思也是很好理解。

请求个接口，打印出来结果，并且捕获异常

下面我们来看下一段代码

const LoadData = async()=>{
  const url = 'http://127.0.0.1:3000/json';
  const res = await fetch(url);
  const data = await res.json();
  console.log(data);
}
LoadData();

替换成await async 的写法，但是没有捕获异常，这种写法捕获异常可以使用非常古老可靠的try catch 进行

const LoadData = async()=>{
  try {
    const url = 'http://127.0.0.1:3000/json';
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch(err){
    console.error(err)
  }
}
LoadData();

同时 node 14.8.0之后，node实现了 top level await 可以省略外部的async

try{
    const url = 'http://127.0.0.1:3000/json';
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
} catch (err) {
    console.error(err)
}

async 的函数返回的是个promise，所以会有下面这种写法

const LoadData = async()=>{
  try {
    const url = 'http://127.0.0.1:3000/json';
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch(err){
    console.error(err)
  }
}

LoadData().then(
  (data)=>{
    console.log(data);
    return data;
  }
) 

可以用IIFE

const LoadData = async()=>{
  try {
    const url = 'http://127.0.0.1:3000/json';
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch(err){
    console.error(err)
  }
}

(
  async ()=>{
    const data = await LoadData();
    console.log(data)
  }
)()

再看一个小例子

const LoadData = async()=>{
  try {
    const url1 = 'http://127.0.0.1:3000/json';
    const url2 = 'http://127.0.0.1:3000/json2';
    const url3 = 'http://127.0.0.1:3000/json3';
    const res1 = await fetch(url1);
    const data1 = await res1.json();
    const res2 = await fetch(url2);
    const data2 = await res2.json();
    const res3 = await fetch(url3);
    const data3 = await res3.json();
    return [data1,data2,data3];
  } catch(err){
    console.error(err)
  }
}
(
  async ()=>{
    const data = await LoadData();
    console.log(data)
  }
)()

稍微优化一点

const LoadData = async()=>{
  try {
    const url1 = 'http://127.0.0.1:3000/json';
    const url2 = 'http://127.0.0.1:3000/json2';
    const url3 = 'http://127.0.0.1:3000/json3';
    
    const results = await Promise.all(
      [fetch(url1),fetch(url2),fetch(url3)]
    )
    const dataResponses =  results.map(result=>result.json())
    const finalData = await Promise.all(dataResponses);
    return finalData;
    
  } catch(err){
    console.error(err)
  }
}
(
  async ()=>{
    const data = await LoadData();
    console.log(data)
  }
)()

相信聪明的你已经领悟到来用法了，没明白就多看几遍自己多来代码

为了方便练习，对应到后台代码去我github上拉取即可 https://github.com/knightgao/koademo.git tag:demo1