PromiseA+规范及常用方法（学习笔记）

最新推荐文章于 2024-03-21 22:27:16 发布

gongshaoxu

最新推荐文章于 2024-03-21 22:27:16 发布

阅读量359

点赞数 1

分类专栏：学习笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45719821/article/details/122342922

版权

学习笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

PromiseA+规范及常用方法（学习笔记）

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
promise可以支持多个并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，前端操作中，经常要有异步操作，比如在等待服务端返回response的时候，异步操作显得格外重要。

规范

Promise三种状态

pending

1.1 初始的状态, 可改变.
1.2 一个promise在resolve或者reject前都处于这个状态。
1.3 可以通过 resolve -> fulfilled 状态;
1.4 可以通过 reject -> rejected 状态;
fulfilled

2.1 最终态, 不可变.
2.2 一个promise被resolve后会变成这个状态.
2.3 必须拥有一个value值
rejected

3.1 最终态, 不可变.
3.2 一个promise被reject后会变成这个状态
3.3 必须拥有一个reason

Tips: 总结一下, 就是promise的状态流转是这样的：

pending -> resolve(value) -> fulfilled
pending -> reject(reason) -> rejected

promise基本用法

var promise = new Promise((resolve,reject)=>{
	if(xxx){
        resolve(success);
    }else{
        reject(error)
    }; 
})

Promise实例接受一个函数作为参数，函数有两个参数，resolve和reject;
resolve表示异步操作执行成功后触发该回调函数,对应pending->resolve
reject表示异步操作失败后触发该回调函数，对应pending->rejected
所有回调函数在同步函数执行完后再执行

1.promise.prototype.then()

promise应该提供一个then方法, 用来访问最终的结果.

//then方法实例
promise.then(function(success){//第一个参数接收resolve返回的对象
    //success
},function(error){  //第二个为可选参数，接收reject返回的对象，可不写
    //failure
})

then的链式调用：promise.then()返回的也是一个promise对象，也具有两个状态

promise.then(function(success){
    return 'xxx';      //前一个then方法的返回值传给下一个then作为参数
}).then(function(name){     //获取上一个then传来的name
    console.log(name);
},function(error){          //错误时进行调用
    console.log('rejected');
})

如何中断promise链

有时候，你想要中断你写的那个很长的then链，怎么办？返回一个pending状态的promise！！！

.then(
    value => {
        console.log("onResolved3()", value);
    },
    // 没有写函数体时，默认加上return
    reason => {return new Promise(()=>{})} // 返回pending状态的promise
)

2.Promise.prototype.catch ()

Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的，catch方法是失败时进行的回调函数。

//失败时进行的回调函数
promise.catch(function(error){
    console.log(error);
})
//等价于
promise.then(null,function(error){      //此方法不建议使用
    console.log(error);
})

//catch的链式调用：catch返回的也是一个promise对象，因为等价于then
promise.catch(function(){
    throw new Error('this is error');
}).catch(function(e){
    console.log(e); 输出'this is error'，上一级error由下一级catch
})

3.Promise.prototype.finally()

finally()方法是无论Promise的状态是成功还是失败都会执行，接收一个回调函数。

4.Promise.prototype.done()

//Promise采用链式调用的方式，前面出现的错误后面可以catch到，但是最后一个catch抛出错误将无法捕获
p.catch(function(e){
    console.log('a');
    throw new Error('this is error');
}).catch(function(e){
    console.log(e);
    throw new Error('this is finally error');   //由于此错误在最后一个catch范围所以无法捕获
})
p.then().catch().then().done(); //done方法会捕获所有错误并抛出。

5.Promise.all()

all()方法是将多个Promise包装成一个新的Promise实例，接收一个数组，数组成员即是每个Promise实例，接收参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。
该方法只有在每个Promise返回成功状态后才会返回成功的状态，返回的参数也是一个数组，数组成员即是每个Pormise实例的返回值，否则有一个Promise实例返回失败的状态，那么包装后的Promise也会返回一个失败的状态，返回的参数是第一个返回失败状态的Promise的返回值。

//将多个promise合并为一个
var p=Promise.all([p1,p2,p3]);      
//状态相当于p1&&p2&&p3，都成功返回成功，其中一个失败返回失败

6.Promise.race()

all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调

//传入多个promise最后生成一个
Promise.race([p1,p2,p3])    
//谁先状态发生改变，Promise就变成谁

7.Promise.resolve()

//将其他对象转化为promise对象，默认为resolve
Promise.resolve('A');   //也可以不传入参数
//相当于
new Promise(resolve=>{
    resolve('A');
})

8.Promise.reject()

//将其他对象转化为promise对象，默认为reject
var p=Promise.reject('error');
//相当于
var p=new Promise((resolve,reject){
    reject('error');
});
p.catch(function(e){
    console.log(e);
})