Promise

Promise

Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题。

案例:模拟使用ajax连续发起两次请求

第一次请求monster.json获取到monster的id

json 复制代码
{
  "id": 1,
  "name": "黑山老妖"
}

第二次请求需要根据第一次获取到的id来获取monster的详细信息

json 复制代码
{
  "address": "阴曹地府-黑山",
  "skill": "翻江倒海功",
  "age": 800
}

传统的ajax方式:

javascript 复制代码
//jquery 发出 ajax 的方式
$.ajax({
    url: "data/monster.json",
    success(resultData) {	//如果请求成功了,回调处理函数 success
        console.log("第 1 次 ajax 请求 monster 基本信息=", resultData);
        //发出第二次 ajax 请求
        $.ajax({
            url: `data/monster_detail_${resultData.id}.json`,
            success(resultData) {
                console.log("第 2 次 ajax 请求 monster 详细信息=", resultData);
                //$.ajax => callback hell
            }, error(err) { //出错的回调函数
                console.log("出现异常=", err);
            }
        })
    }, error(err) {
        console.log("出现异常=", err);
    }
})

使用promise:

javascript 复制代码
	//1. 创建 Promise 对象
    //2. 构造函数传入一个箭头函数
    //3. (resolve, reject) 参数列表 resolve: 如果请求成功, 调用 resolve 函数
    //4. 如果请求失败, 调用 reject 函数
    //5. 箭头函数体, 仍然是通过 jquery 发出 ajax
    let p = new Promise((resolve, reject) => {
        //发出 ajax
        $.ajax({
            url: "data/monster.json", 
            success(resultData) {	//成功后回调函数
                console.log("promise1 结果 =", resultData);
                resolve(resultData);
            }, error(err) {
				//console.log("promise1 请求异常=", err);
                reject(err);
            }
        })
    })
    //这里我们可以继续编写请求成功后的业务
    p.then((resultData) => {
		//这里我们可以继续发出请求
		//console.log("p.then 得到 resultData", resultData);
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `data/monster_detail_${resultData.id}.json`, 
				success(resultData) { //第 2 次 ajax 请求成功,回调函数
                    console.log("promise2 结果 =", resultData);
                    //继续进行下一次的请求
                    resolve(resultData);
                }, error(err) { //第 2 次 ajax 请求失败,回调函数
					//console.log("promise2 请求异常=", err);
                    reject(err);
                }
            })
        })
    }).then((resultData) => {
		//可以在这继续发起请求
    }).catch((err) => { //这里可以对多次 ajax 请求的异常进行处理
        console.log("promise 异步请求异常=", err);
    })

注意事项和使用细节:

  • 如果返回的是 Promise 对象,可以继续执行.then()
  • .then((data)=>{}) 的 data 数据是上一次正确执行后 resolve(data) 返回传入的
  • 通过多级.then() 可以对异步请求分层次请求,实现代码重排,代码逻辑更加清晰合理
  • 通过多级.then() 后面的 .catch((err) => {}) 可捕获发生异常,便于调试
相关推荐
GIS之路17 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千20 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴25 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥29 分钟前
HTML之表单结构全解析
前端·html
qq_5895681038 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记40 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript