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对象