async和await

Posted 2021-05-16 MaNqo

ES8新特性

async和await

async和await两种语法结合可以让异步代码像同步代码一样

a. mdn文档:

• https: //developer.mozilla.org/zh-CN/docs/Web/javascript/Reference/Statements/async_function
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

1. async函数

• 函数的返回值为promise对象

• promise对象的结果由async函数执行的返回值决定

await

• 表达式：一个Promise对象或者任何要等待的值
• 返回值：返回Promise对象的处理结果，如果等待的不是Promise对象，则返回该值本身

[return_value] = await expression

2. await表达式

• await右侧的表达式一般为promise对象, 但也可以是其它的值

• 如果表达式是promise对象, await返回的是promise成功的值

• 如果表达式是其它值, 直接将此值作为await的返回值

  注意：

  • await必须写在async函数中, 但async函数中可以没有await
  • 如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理

  function fn2() {
      return Promise.reject(2)
  }
  async function test() {
      /* let result = fn2().then(value => {
               console.log('value',value)
           },
           reason => {
               console.log('reason',reason)
           });*/
      try {
          let result = await fn2();
          console.log('result', result)
      } catch (error) {
          console.log('error', error)
      }
  }
  test()
  // await右侧表达为promise，得到的结果就是promise成功的值
  // await只想得到成功的结果，所有用try...catch...
  // await右侧表达不为promise，得到的结果就是它本身
  

// async 函数
async function fn() {
    // 返回一个字符串
    // return 'shangguigu';
    // 返回的对象不是一个Promise对象，则返回一个成功的promise
    W
    // 抛出错误
    // throw new Error('wrong');
    
    // 返回的结果是一个promise对象
    return new Promise((resolve, reject) => {
        reject('失败');
    })
}
const result = fn();
console.log(result);

// 创建promise对象
const p = new Promise((resolve, reject) => {
    // resolve('success');
    reject("wrong");
})
// await 要放在async函数中
async function main() {
    try {
        let result = await p;
        console.log(result);
    } catch (e) {
        console.log(e);
    }
}
main();

3. async和await结合读取文件

• 发送ajax请求

  function sendAJAX(url) {
      return new Promise((resolve, reject) => {
          // 1. 创建对象
          const x = new XMLHttpRequest();
          // 2. 初始化
          x.open('GET', url)
          // 3. 发送
          x.send();
          // 4. 事件绑定
          x.onreadystatechange = function () {
              if (x.readyState === 4) {
                  if (x.status >= 200 && x.status < 300) {
                      resolve(x.response);
                  } else {
                      reject(x.status);
                  }
              }
          }
      })
  }
  

  • 发送AJAX请求

async function main() {
    await sendAJAX("http://api.apiopen.top/getJoke");
    // 返回结果是promise
}
main();