认识Promise

最新推荐文章于 2024-11-04 17:05:06 发布

热爱前端的小wen

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量577

点赞数 11

文章标签： Promise 前端 ajax css javascript html5 axios

本文链接：https://blog.csdn.net/m0_57184906/article/details/136956486

版权

3. 练习——使用Promise + XHR 获取省份列表

1. Promise介绍

1.1. Promise定义

Promise对象用于表示（管理）一个异步操作的最终完成(或失败)及其结果值。

1.2. Promise作用

使异步操作逻辑更加清晰
了解 axios 函数内部运作机制
能解决回调函数地狱问题

回调地狱：回调函数中嵌套回调函数——代码可读性差，不好维护

1.3. Promise语法

2. Promise - 三种状态

2.1. Promise三种状态的作用

了解Promise对象如何关联的处理函数，以及代码执行顺序
状态改变后，调用关联的处理函数

2.2. Promise三种状态的概念

一个Promise对象，必然处于以下几种状态之一

resolve() => 'fulfilled状态-已兑现' => then()

reject() => 'rejected状态-已拒绝' => catch()

2.3. 注意

Promise对象一旦被兑现/拒绝就是已敲定了，状态无法再被改变

3. 练习——使用Promise + XHR 获取省份列表

需求：使用 Promise 管理 XHR 获取省份列表，并展示到页面上
步骤：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例_使用Promise+XHR_获取省份列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：使用Promise管理XHR请求省份列表
     *  1. 创建Promise对象
     *  2. 执行XHR异步代码，获取省份列表
     *  3. 关联成功或失败函数，做后续处理
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // 2. 执行XHR异步代码，获取省份列表
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://hmajax.itheima.net/api/province')
      xhr.addEventListener('loadend', () => {
        // xhr如何判断响应成功还是失败的？
        // 2xx开头的都是成功响应状态码
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
    })

    // 3. 关联成功或失败函数，做后续处理
    p.then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error => {
      // 错误对象要用console.dir详细打印
      console.dir(error)
      // 服务器返回错误提示消息，插入到p标签显示
      document.querySelector('.my-p').innerHTML = error.message
    })
    
  </script>
</body>

</html>