JavaScript:Promise

提出问题

使用 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)
})

原文出处:https://malaoshi.top/show_1IX3oXyazfeK.html