JavaScript：Promise链式调用

听海边涛声

已于 2024-07-15 08:15:01 修改

阅读量122

点赞数 2

文章标签： javascript 前端 Promise

于 2024-07-14 19:21:45 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140417430

版权

说明

Promise链式调用：

依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一个任务，直到结束。
then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果。
通过链式调用，解决回调函数嵌套问题。

在这里插入图片描述

示例

用setTimeout模拟网络请求

<!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_链式调用</title>
</head>

<body>
  <script>
    /**
     * 目标：掌握Promise的链式调用
     * 需求：把省市的嵌套结构，改成链式调用的线性结构
    */
    //  1. 创建Promise对象，来模拟请求省份的名字
    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('山东省')
      }, 3000)
    })

    // 2. 获取省份的名字
    const p2 = p1.then(result => {
      console.log(result)
      // 3. 创建一个Promise对象，来模拟请求城市的名字
      // return的 Promise对象最终状态和结果，影响到新的Promise对象(即p2)
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(result + '---济南市')
        }, 3000);
      })
    })

    // 4. 获取城市名字
    p2.then(result => {
      console.log(result)
    })

    // 判断p2和p1是否相等，结果是不相等
    // 由此证明then()原地的结果是一个新的Promise对象
    console.log('p2和p1是否相等：', p2 === p1)
  </script>
</body>

</html>

开始刷新页面显示：
在这里插入图片描述

3秒钟以后显示：
在这里插入图片描述

再过了另外3秒钟显示：
在这里插入图片描述

用Promise链式调用请求数据

链式调用的目标：请求省份数据，默认展示第1个：请求省份下的地市数据，默认展示第1个；请求省份、地市下的地区数据，默认展示第1个：
在这里插入图片描述

<!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链式调用_解决回调地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：把回调函数嵌套代码，改成Promise链式调用结构
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    */
    let pname = ''
    // 1. 得到获取省份的Promise对象
    axios({ url: 'https://hmajax.itheima.net/api/province' }).then(result => {
      // console.log(result)
      pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // 2. 得到获取城市的Promise对象
      return axios({ url: 'https://hmajax.itheima.net/api/city', params: { pname } })
    }).then(result => {
      // console.log(result)
      const cname = result.data.list[0]
      document.querySelector('.city').innerHTML = cname
      // 3. 得到获取地区的Promise对象
      return axios({ url: 'https://hmajax.itheima.net/api/area', params: { pname, cname } })
    }).then(result => {
      // console.log(result)
      const areaName = result.data.list[0]
      document.querySelector('.area').innerHTML = areaName
    })
  </script>
</body>

</html>