es6之async&await

Async/await

Async/await能够更加方便的使用promise。一个async函数会返回一个promise对象，可以使用then添加回调函数。

当函数执行的时候，一旦遇到了await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。async函数的返回值默认被包装在一个resolved的promise中，也可用显式的返回一个promise。

async function fun(){
    return 1;  //隐式返回
    //return Promise.resolve(1);  //显式返回
}
fun().then(data=>console.log(data))  //1

//若是抛出错误，就会被catch捕获
async function fun(){
    throw new Error('error了');
}
fun().then().catch(err=>console.log(err))  //Error: error了

await只能在async函数中运行，关键字await能让JavaScript引擎等待直到promise完成(settled)并返回结果

async function fun(){
    let promise = new Promise((resolve,reject)=>{
        setTimeout(()=> resolve('success'),2000)
    });
    let result = await promise;  //暂停，一直等到promise.resolve(*)完成
    console.log(result);
}
fun();

await是让JavaScript引擎等待直到promise完成，然后以promise的结果继续执行。等待过程不会消耗任何CPU资源，引擎在等待过程中，会去处理其他任务。

//一个实例
async function showAvatar() {
  // 读取我们的 JSON
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  // 读取 github 用户信息
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();
  // 显示头像
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);
  // 等待 3 秒
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));
  img.remove();
  return githubUser;
}
showAvatar();

//使用async/await来改写.then/catch
function loadSJSon(){
    return fetch(url).then(
    	response=>{
            if(response.status === 200){
                return response.json();
            }else{
                throw new Error(response.status)
            }
        }
    )
}
loadJson('no-such-user.json').catch(console.log);

//改写
async function loadJson(url) { // (1)
  let response = await fetch(url); // (2)
  if (response.status == 200) {
    let json = await response.json(); // (3)
    return json;
  }
  throw new Error(response.status);
}
loadJson('no-such-user.json')
  .catch(alert); // Error: 404 (4)