JavaScript:ajax Promise 作者:马育民 • 2022-08-06 19:46 • 阅读:10055 # 提出问题 使用 ajax 时,会遇到这种情况,需要先发 一个ajax请求,称之为 **A请求**,返回结果后,再发一个ajax请求,称之为 **B请求**。 也就是说这2个请求是有先后顺序的 **问题:**由于ajax是异步调用,也就是说无法确定这2个ajax的请求顺序 这里为了简单,通过 `setTimeout()` 模拟异步 ``` setTimeout(function(){ console.log(111) // 虽然写在前面,但是后执行 },1000) setTimeout(function(){ console.log(222) // 虽然写在后面,但是先执行 },500) ``` 执行结果: ``` 222 111 ``` # Promise `Promise` 类可以解决上面的问题,可以让异步程序,有顺序的执行 **浏览器支持:**由于 Promise 是 ES6 新增加的,所以一些旧的浏览器并不支持,苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。 ### 使用方法 ``` new Promise(function (resolve, reject) { // 异步代码 }).then(function(data){ // 代码块2 }).catch(function(data){ // 代码块3 }) ``` 需要向 `Promise(f)` 传入一个函数,该函数有2个参数,这2个参数也是函数 - 第一个是 `resolve(data)`(可以没有该代码块) ,调用该函数表示成功,接下来会执行 `then()` 中的回调函数 - 第二个是 `reject(data)` (可以没有该代码块) ,调用该函数表示失败,接下来会执行 `catch()` 中的回调函数 # 案例 ``` var successFlag = true var pro = new Promise(function(resolve, reject){ setTimeout(function(){ console.log(111) if (successFlag){ resolve("执行成功!") }else{ reject("执行失败!") } },1000) }) .then(function(data){ setTimeout(function(){ console.log(222,data) },500) }).catch(function(data){ setTimeout(function(){ console.log(333,data) },500) }) ``` ### 多个then写法 `then()` 支持链式调用,即:支持多个 `then()` 顺序执行,此时 `then()` 方法要返回一个 `Promise` 对象 ``` ``` 参考: https://juejin.cn/post/6876686095954903048 https://juejin.cn/post/6948401178975666190 原文出处:http://malaoshi.top/show_1IX3oXyazfeK.html