promise的简介

一、简介

Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。

二、promise的基本用法

1、then中成功/失败的执行

~~~js
// resolve代表成功 reject失败 都是一个函数

let p = new Promise(function(reslove,reject){

    //reslove('成功')  //状态由等待变为成功,传的参数作为then函数中成功函数的实参

    reject('失败')  //状态由等待变为失败,传的参数作为then函数中失败函数的实参

})

//then中有2个参数,第一个参数是状态变为成功后应该执行的回调函数,第二个参数是状态变为失败后应该执行的回调函数。

p.then((data)=>{

    console.log('成功'+data)

},(err)=>{

    console.log('失败'+err)

})
~~~

注:promise默认情况下是等待状态pending,如果有一天状态转变为成功就成功了,如果状态变成失败就失败了。状态一旦改变了就不能再改变了

2、如果then中返回了一个promise 会将promise的结果继续传给第二then中(如果结果是将状态改成成功就走下一个then的成功回调,状态改为失败就走下一个then的失败回调)

~~~js
function read( content ) {
    return new Promise(function( reslove,reject ) {
        setTimeout(function(){
                if(content>4){
                    resolve(content)
                }else{
                    reject('小于4')
                }
        },1000)
    })
}

read(1).then(( data )=>{
    console.log(data)
},( err )=>{
    console.log(err) //小于4
    return read(2) //将状态改为了失败
})
.then(( data )=>{
    console.log('data',data)
},( err )=>{
    console.log(err) //小于4
})
~~~

3、第一个then不管是走成功还是失败的回到函数,只要返回一个普通值(不抛出错误或者返回promise),都会执行下一个then的成功的回调。

~~~js
let p = new Promise(function(reslove,reject){
    reject('失败1')
})

p.then((data)=>{
    console.log('成功'+data)
},(err)=>{
    console.log('失败'+err) //失败失败1
})
.then((data)=>{
    console.log('成功1'+data) //成功1undefined
},(err)=>{
    console.log('失败1'+err)
})

eg:抛出错误执行下一个then的失败

let p = new Promise(function(reslove,reject){
    reject('失败1')
})

p.then((data)=>{
    console.log('成功'+data)
},(err)=>{
    console.log('失败'+err) //失败失败1
})
.then((data)=>{
    console.log('成功1'+data) //成功1undefined
    throw Error('下一个失败')
},(err)=>{
    console.log('失败1'+err)
})
.then((data)=>{
    console.log('成功2'+data)
},(err)=>{
    console.log('失败2'+err) //失败2Error: 下一个失败
})
~~~

4、catch的用法

catch可以实现错误的捕获 一般写在最后,如果上面有自己的err会走自己的error。如果没有写就会走到catch。

let p = new Promise(function(resolve,reject){
    reject('失败')
});

p.then((data)=>{

},(err)=>{
    throw Error('错误')
})
.then((data)=>{

},(err)=>{
    console.log(err+'自己的err'); //走自己的(输出:Error: 错误自己的err)
    throw Error('错误自己抛出的')
})
.then((data)=>{
//没有自己的失败处理函数,走catch
}).catch(e=>{
    console.log(e+'公共的err') //输出:Error: 错误自己抛出的公共的err
})

5、all的用法

Promise.all方法执行后返回的依旧是promise, all中的几个promise全成功才表示成功 。有一个失败就会执行失败。

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)           //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了,打出 '失败'
})

Promise.all可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据。返回的数据与传的参数数组的顺序是一样的。(与谁先执行完没关系)

5.1 使用promise.all将会带来的影响
  • 如果有一个回调执行失败,then是不会执行的,相当于所有的promise都失败了
  • 即使有几个promise已经进入resolved状态,也会阻塞在那里直到所有的promise完成
  • 会使得项目的容错大大降低,如果随便使用的话,可能只是一个不关键的数据加载失败,其他所有的数据也不会显示。
5.2 promise.all的使用场景
  • 几个异步操作是强相关的,后续步骤必须依赖这几个步骤全部成功才能进行

6、race的用法

如果先成功了那就成功了, 如果先失败了那就失败了(取决于先执行完的promise返回的结果

function read(content) {
    return new Promise(function (resolve, reject) {
            if(content>4){
                resolve(content)
            }else{
                reject(content)
            }
    })
}

let result = Promise.race([read(5), read(2)]);
result.then((data) => {
    console.log('成功'+data)//成功5
},(err)=>{
    console.log('失败'+err) 
})
function read(content) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            if(content>4){
                resolve(content)
            }else{
                reject(content)
            }
        }, 1000*content)
    })
}

let result = Promise.race([read(5), read(2)]);
result.then((data) => {
    console.log('成功'+data)
},(err)=>{
    console.log('失败'+err) //失败2
})

7、Promise的静态方法

resolve:
Promise.resolve([1,2,3]).then(function(data){
    console.log(data); //[1,2,3]
});

reject:
Promise.reject([1,2,3]).then(null,function(err){
    console.log('err',err) //err [ 1, 2, 3 ]
});
posted @ 2021-05-10 21:37  Upward123  阅读(110)  评论(0编辑  收藏  举报