Promise的基本使用

最新推荐文章于 2024-03-19 10:57:28 发布

web老猴子

最新推荐文章于 2024-03-19 10:57:28 发布

阅读量507

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/web220507/article/details/125182893

版权

作用

用来优化异步代码的写法

Promise的基本使用

var p1 = new Promise(function(resolve,reject){
     //异步操作 resolve(obj1)  或者 reject(obj2)
});
p1.then(function(rs){
    // 如果p1的状态是resolved，则then中的函数
    //会执行，且obj1的值会传给rs
}).catch(function(rs){
    // 如果p1的状态是reject，则catch中的函数
    //    会执行，且obj2的值会传给rs
}).finally(function(){
    // 一定会执行的函数
})

构造器

new一个promise
参数是一个回调函数
回调函数里面有两个参数resolve(成功)和reject(失败)
这里面的两个参数也是函数,可以调用
会有返回值

const p1 = new Promise(function(resolve,reject){
  // 执行异步代码
  // 调用resolve,或者reject
});
console.dir(p1)

三种状态和值

初始状态 pending

它的意思是待定的，即将发生的，相当于是一个初始的对象，创建promise对象的时候，没有调用reject或者resolve方法的时候，相当于是初始状态，这个状态会随着函数的resolve或reject的调用发生变化

const p1 = new Promise(function(resolve,reject){
//不调用就是初始状态pending
});
console.dir(p1)

成功状态 resolved

也有叫做fulfilled，resolved，表示解决了，就是说这个承诺实现了，要实现从pending到resolved转变，需要在创建promise的对象的时候，在函数体中调用resolve的方法即可

 const p = new Promise((resolve, reject) => {
        //调用resolve的方法
            resolve()
        })
        console.dir(p)

失败状态 rejected

rejected表示这个承诺没有做到，失败了，要实现从pending到rejected转变，需要在创建promise的对象的时候，在函数体中调用reject的方法即可

 const p = new Promise((resolve, reject) => {
            reject()
        })
        console.dir(p)

小结：

状态是可以转化的

最初创建promise对象时，默认状态是pending，如果在函数体内部调用了第一个参数对应的函数，则状态变成了resolved；如果调用了第二个参数对应的函数，则状态变成了rejected

状态转换是不可逆的

一旦从pending —> resolved（或者是rejected），就不可能再回到pending，也不能由resolved变成rejected

promise是可以进行传值的

在构造器中，这个值在调用resolve或者reject方法的时候传入
例如：

 const p = new Promise((resolve, reject) => {
            resolve(100)
        })
        console.dir(p)

promise的兑现

在构造器的函数体中，一旦状态发生了变化，就会进行then，或者是catch中去，同时把promiseValue传入对应的函数
具体说明：

状态从pending变成resolved，进入then中，调用函数，并传入此时的promiseValue（就是调用resolve时传入的实参）
状态从pending变成rejected，进入catch中，调用函数，并传入此时的promiseValue（就是调用reject时传入的实参）
根据实际的情况，也可以不加上finally()

使用promise改造回调函数

第一步：建立模板。这里的模板是指固定的套路：写一个空函数，在函数体中的创建一个promise对象，并返回
第二步：把异步功能写入构造器中，根据实际来决定是否调用resolve,reject

function fnName(){
    var p = new Promise((resolve,reject)=>{
        // 这里写具体的代码，并在某个恰当的时机去调用resolve和reject函数。
    })
    return p;
}

第三步：调用这个函数，通过fnName().then().catch() 结构来调用这个函数

then方法的使用

作用：为Promise对象添加状态改变时的回调函数
格式：它有两个参数，每个参数都是函数。第二个参数是可选的
注意：

第一个参数是resolved状态的回调函数。当p的状态从pending变成了resolved，函数1会执行
第二个参数是rejected状态的回调函数。当p的状态从pending变成了rejected，函数2会执行

// p 是一个promise对象
p.then(函数1[,函数2])

如果promise对象的状态是resolved，则then()会执行第一个函数，并传入当前的PromiseValue（即上面的val1）
如果promise对象的状态是rejected，则then()会执行第二个函数，并传入当前的PromiseValue（即上面的val2）
特别地，如果promise对象的状态是rejected，且此时then方法并没有设置第二个参数，就会向外抛出一个错误，错误的提示大约是Uncaught (in promise)

 var p = new Promise((resolve, reject) => {
            //  resolve(val1);
            reject('val2')
        })

        p.then(
            okVal => {
                console.info("成功");
                console.log(okVal);
            },
            errVal => {
                console.info("失败");
                console.log(errVal);
            }
        )

 var p = new Promise((resolve, reject) => {
            resolve('val1')
            // reject('val2')
        })

        p.then(
            okVal => {
                console.info("成功");
                console.log(okVal);
            },
            errVal => {
                console.info("失败");
                console.log(errVal);
            }
        )

then的返回值

注意：

then()方法的返回值也是一个promise对象
它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象

 var p1 = new Promise(()=>{});
    var p2 = p1.then(function f_ok(){}, function f_err(){}); 
    // p2也是一个promise对象。
    
    console.log(p1 === p2); // false

then()会封装一个全新的promise对象p2，p2的状态和值如何确定

如果p1的状态是pending,则p2的状态也是pending

 const p1 = new Promise((resolve, reject) => { })
        const p2 = p1.then(ok => { }, err => { })
        console.log(p2)

如果p1的状态是resolved，then()会去执行ok，则p2的状态由ok的返回值决定

第一种情况，返回值不是promise对象，则p2的状态是resolved,且p2的值就是ok函数return的值

 const p1 = new Promise((resolve, reject) => {
            resolve()
        })
        const p2 = p1.then(ok => {
            //1.第一种情况，返回值不是promise对象，则p2的状态是resolved,且p2的值就是ok函数return的值
            return 100
        }, err => { })
        console.log(p1)
        console.log(p2)

2. 第二种情况，返回值是promise对象，则p2的状态和值以这个新的promise对象为准

 const p1 = new Promise((resolve, reject) => {
            resolve()
        })
        const p2 = p1.then(ok => {

            //2. 第二种情况，返回值是promise对象，则p2的状态和值以这个新的promise对象为准
            const temp = new Promise((resolve, reject) => {

            })
            return temp
        }, err => { })
        console.log(p1)
        console.log(p2)

3. 第三种情况，如果内部发生了错误（或者用户主动抛出错误），则p2的状态是rejected,且p2的值是这个错误对象

 const p1 = new Promise((resolve, reject) => {
            resolve()
        })
        const p2 = p1.then(ok => {

            //3.第三种情况，如果内部发生了错误（或者用户主动抛出错误），则p2的状态是rejected,且p2的值是这个错误对象
        console.log(error)
        }, err => { })
        console.log(p1)
        console.log(p2)

如果p1的状态是rejected，then()会去执行err，则p2的状态由err的返回值决定

第一种情况，返回值不是promise对象，则p2的状态是resolved,且p2的值就是ok函数return的值

 const p1 = new Promise((resolve, reject) => {
            reject()
        })
        const p2 = p1.then(ok => {

        }, err => {
            //1.第一种情况，返回值不是promise对象，则p2的状态是resolved,且p2的值就是ok函数return的值
            return 125
        })
        console.log(p1)
        console.log(p2)

2. 第二种情况，返回值是promise对象，则p2的状态和值以这个新的promise对象为准

 const p1 = new Promise((resolve, reject) => {
            reject()
        })
        const p2 = p1.then(ok => {

        }, err => {
            //2. 第二种情况，返回值是promise对象，则p2的状态和值以这个新的promise对象为准
            const temp = new Promise((resolve, reject) => {
                resolve(100)
            })
        })
        console.log(p1)
        console.log(p2)

3. 第三种情况，如果内部发生了错误（或者用户主动抛出错误），则p2的状态是rejected,且p2的值是这个错误对象

 const p1 = new Promise((resolve, reject) => {
            reject()
        })
        const p2 = p1.then(ok => {

        }, err => {
            // 3.第三种情况，如果内部发生了错误（或者用户主动抛出错误），则p2的状态是rejected,且p2的值是这个错误对象
            console.log(error)
        })
        console.log(p1)
        console.log(p2)

如果函数中没有return,则相当于return undefined

catch的格式及用法

catch 是 then(null, reject)的别名
Promise.prototype.catch 是 Promise.prototype.then(null, reject)的别名，用于指定当promise对象的状态从pending变成rejected的回调函数

var p1 = new Promise((resolve,reject)=>{
	reject('s')
});

p1.catch(function(err){
	console.log(err);
})

// 与下面的代码等价
p1.then(null, function(err){
	console.log(err);
})

catch一般不单独使用，一般和then一起使用

new Promise((resolve,reject)=>{

}).then(function(result){
	// 如果promise对象的状态是resolved的，就会到这里来，并且result会接收promiseValue的值
}).catch(function(err){
	// 如果promise对象的状态是rejected的，就会到这里来，并且err会接收promiseValue的值
})

// 上面的代码如何拆分来写的话，等价于：
var p1 = new Promise((resolve,reject){

});
var p2 = p1.then(function(result){

});
var p3 = p2.catch(function(err){

})

catch的返回值仍然是一个promise对象

async-await

async，await 是es7中新增的语法，用来进一步改进异步代码的写法，是promise升级版

`async`函数返回一个 Promise 对象

async函数内部return语句返回的值是Promise 对象的值

function f1 () {
  return 1
}
async function f2 () {
  return 1
}
async function f3 () {}
const r1 = f1()
const r2 = f2()
const r3 = f3()
console.log(r1) // 1
console.log(r2) // Promise, resolved(1)
console.log(r3) // Promise, resolved(undefined)
r2.then(res => { console.log(res) })
r3.then(res => { console.log(res) })

await 命令

await的外层函数必须有一个async
正常情况下，await命令后面是一个 Promise 对象，返回该promise的值。如果不是 Promise 对象，就直接返回对应的值

按序执行同步代码
遇到await，跳出async函数，

 async function f() {
            const p = new Promise((resolve, reject) => {
                resolve(100)
            })
            const a = 1

            // await 等待promise的状态变化完成(pending->resolved, pending->rejected)
            // 取出promise的值
            const b = await p

            console.log(a, b)    //1  100
        }

        f()

回调地狱的解决办法

 function getDataPromise(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest()
                xhr.open('get', url)
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        // 加载完成
                        const d = JSON.parse(xhr.responseText);
                        resolve(d)
                    }
                }
                xhr.send()
            })
        }

        async function get() {
            const res1 = await getDataPromise('http://localhost:3000/get')
            const res2 = await getDataPromise('http://localhost:3000/getCategory?id=' + res1[0].id)
            const res3 = await getDataPromise('http://localhost:3000/getNews?id=' + res2[0].id)
            console.log(res3)
        }

        get()

web老猴子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Promise的基本使用

用来优化异步代码的写法构造器new一个promise参数是一个回调函数回调函数里面有两个参数resolve(成功)和reject(失败)这里面的两个参数也是函数,可以调用会有返回值三种状态和值初始状态 pending它的意思是待定的，即将发生的，相当于是一个初始的对象，创建promise对象的时候，没有调用reject或者resolve方法的时候，相当于是初始状态，这个状态会随着函数的resolve或reject的调用发生变化也有叫做fulfilled，resolved，表示解决了
复制链接

扫一扫