promise学习完整笔记

最新推荐文章于 2025-12-20 19:18:59 发布

原创最新推荐文章于 2025-12-20 19:18:59 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端 #javascript

文章详细介绍了JavaScript中的Promise对象用于异步编程的解决方案，包括Promise的创建、链式调用、resolve和reject的功能，以及封装axios的示例。还提到了Promise的状态（pending、fulfilled、rejected）和值。此外，讨论了catch方法、Promise.all、Promise.race的用法，以及async函数和await关键字的概念及使用规则。最后指出Promise内部同步执行和异常处理策略。

promise是js中异步编程的新解决方案

支持链式调用

//Promise的实现形式
//resolve 解决  函数类型数据
//reject  拒绝  函数类型数据
const p = new Promise((resolve,reject)=>{
    let n = value;    //可以传递参数
    //包裹异步函数
    resolve(n)
    //成功调用resolver()
    reject(n)
    //失败调用reject()
})


//调用方法
p.then((value)=>{
    //成功时执行的函数    value接受参数
},(reason)=>{
    //失败时执行的函数    reason接送错误理由
});

promise封装axios

function sendAJAX(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        xhr.open("GET", url);
        xhr.send();
        //处理结果
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                //判断成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response);
                } else {
                    reject(xhr.status)
                }
            }
        }
    })
}

//调用
sendAJAX('接口地址')
.then(value => {
    console.log(value);
}, reason => {
    console.warn(reason);
});

Promise 的状态

实例对象中的一个属性 [PromiseState]

pending 未决定的 (最后只会出现下面两种情况中的一种——成功或失败)

resolve / fullfilled 成功

rejected 失败

Promise 对象的值

实例对象中的另一个属性 [PromiseResult]

保存着对象 [成功/失败] 的结果，通过函数取出后进行修改

resolve

reject

catch方法

失败时侯进入(内部实现也是用then方法实现)

let p = new Promise((resolve, reject) => {
    reject(111)
})

p.catch(eer => {
    console.log(eer)
})

Promise.resolve 方法

Promise.reject 方法

Promise.all 方法

Promise.race 方法

Promise如何修改对象状态

异常穿透

对于所有的错误可以在最后添加一个catch进行处理输出

async与await

1、async

（一）函数的返回值为promise对象

（二）promise对象的结果由async函数执行的返回值决定

2、await

（一）await 右侧的表达式一般为promise对象，但也可以是其他值

（二）如果表达式是promise对象，await返回的是promise成功的值

（三）如果表达式是其它值，直接将此值作为await的返回值

（四）await必须卸载async函数中，但async函数中可以没有await

（五）如果await的promise失败了，就会抛出异常，需要通过try...catch捕获处理

3、案例

注意点

1、promise内部是同步调用的：

let p = new Promise((resolve,reject)=>{
    console.log(111)
})

console.log(222)
//答应结果
// 111
// 222

2、改变状态和回调函数的执行谁先谁后

3、中断promise链

返回一个pending状态的promise对象