Promise异步解决方案async与await

七、async与await

1. MDN文档

• async文档
• await文档

2. async 函数

• 函数的返回值为 promise 对象
• promise 对象的结果 由 async 函数执行的返回值决定
  • 返回的是一个非Promise类型的数据
    • 则该函数返回一个成功的Promise对象，且PromiseResult为这个非Promise类型的数据
  • 返回的是一个Promise对象
    • 则本函数返回的结果由返回的Promise对象决定，即和返回的Promise对象一致
  • 抛出异常
    • 返回失败状态的Promise对象，PromiseResult为抛出的异常

3. await表达式

• await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
  • 如果表达式是 promise 对象, await 返回的是 promise 成功的值
  • 如果表达式是其它值, 直接将此值作为 await 的返回值
• 注意
  • await 必须写在 async 函数中, 但 async 函数中可以没有 await
  • 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

4. 案例

/**
 * 封装一个函数sendAJAX发送GET AJAX请求
 * 参数 URL
 * 返回结果Promise对象
 */
function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    // 1. 创建xhr对象
    const xhr = new XMLHttpRequest();
    // 1.1 设置响应体格式
    xhr.responseType = 'json'
    // 2. 初始化
    xhr.open('GET', url);
    // 3. 发送
    xhr.send()
    // 4. 绑定事件，处理响应结果
    xhr.onreadystatechange = function () {
      // 判断
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 控制台输出响应体
          resolve(xhr.response)
        } else {
          reject(xhr.status)
        }
      }
    }
  })
}

//接口地址 https://api.apiopen.top/api/sentences
//获取元素对象
// 获取元素对象
const btn = document.querySelector('#btn')
// 绑定事件
btn.addEventListener('click', async function () {
  try {
    let data = await sendAJAX('https://api.apiopen.top/api/sentences')
    console.log(data)
  } catch (error) {
    console.log(error)
  }
})