【ES8】异步代码终极解决方案 async 和 await

1. async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise

2. async 函数

1. async函数返回值为promise对象
2. promise对象的结果由async函数执行的返回值决定

async function fn() {
    
    
 // 1. 返回结果不是一个Promise类型的对象，返回的结果就是成功的Promise对象
 // return 'yk';  // Promise {<resolved>: "yk"}
  // return; // Promise {<resolved>: undefined}
	
  // 2. 抛出错误，返回的结果是一个失败的Promise
  // throw new Error('出错'); // Promise {<rejected>: Error: 出错

  // 3. 返回一个Promise
  return new Promise((resolve, reject) => {
    
    
    // resolve('成功的数据');
    reject('失败的数据');
  })
}

const result = fn();
console.log(result);

result.then(value => {
    
    
  console.log(value);
}, reason => {
    
    
  console.warn(reason);
})

3. await 表达式

[返回值] = await 表达式;

1. await 必须写在async函数中，但是async函数中可以没有await
2. await 右侧的表达式一般为 promise 对象，也可以是其他值
3. await 返回的是promise成功的值，如果是其他值就返回此值
4. await的promise失败了，就会抛出异常，需要通过try-catch捕获处理

const promise = new Promise((resolve, reject)=> {
    
    
  // resolve('成功的值');
  reject('失败的数据');
})

async function main(){
    
    
  try {
    
    
    let result = await promise;
    console.log(result); // 成功的值
  } catch(e){
    
    
    console.log(e); // 失败的数据
  }
}
main() 

4. async与await结合发送ajax的例子

function sendAjax(url) {
    
    
  return new Promise((resolve, reject) => {
    
    
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onreadystatechange = function() {
    
    
      if(xhr.readyState === 4) {
    
    
        if(xhr.status >= 200 && xhr.status < 300){
    
    
          resolve(xhr.response);
        }else{
    
    
          reject(xhr.status);
        }
      }
    }
  })
}

// then
sendAjax('https://api.apiopen.top/getJoke').then(value=>{
    
    
  console.log(value);
}, reason => {
    
    
})

// async await
async function sendmsg() {
    
    
  let daunzi = await sendAjax('https://api.apiopen.top/getJoke');
  console.log(daunzi)
}
sendmsg();

资料

尚硅谷Web前端ES6教程
尚硅谷Promise教程
尚硅谷Web前端Promise教程从入门到精通
阮一峰es6教程
MDN async_function
MDN await