Promise基本用法

发布于 2022-03-22  80 次阅读


Promise

Promise是什么?有什么作用?

  • 异步编程的一种解决方案
  • 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
  • 可以在对象之间传递和操作promise,帮助我们处理队列

Promise基本用法

promise有三种状态:

  • pending(等待态)
  • fulfiled(成功态)
  • rejected(失败态)

重要:

  • 状态一旦改变,就不会再变。
  • 创造Promise实例后,它会立即执行

Promise构造函数

//Promise为一个构造器函数,可接受一个函数作为参数
const p new Promise(() => {})

//接受的这个函数也有接受两个函数作为参数:resolve,reject(也是函数)
const p new Promise((resolve, reject) => {})

//数据处理成功
const p new Promise((resolve, reject) => {
    resolve();
})
//数据处理失败
const p new Promise((resolve, reject) => {
    reject();
})

.then()

Promise执行完后.then()

.then()接收两个函数作为参数

  • 第一个函数式成功后调用的函数
  • 第二个函数是失败后调用的函数
  • 只传一个的话,是成功后的调用
const p new Promise(() => {})
p.then(()=>{},()=>{})

示例.then()

//成功
const p new Promise((resolve, reject) => {
    reject("成功了");
})
p.then(value=>{
   console.log(value); //成功了
})
//失败
const p new Promise((resolve, reject) => {
    reject("失败了");
})
p.then(value=>{
   console.log(value); 
},err=>{
   console.log(err); //失败了
})

.then()的返回值也是一个Promise对象

const t = p.then()
// t 是一个Promise对象

.then返回一个Promise对象,这样就可以实现链式调用

const p new Promise(() => {}).then().then().then().then()

在.then()中使用return可以操作返回的Promise对象

const p new Promise((resolve, reject) => {
    $.ajax({
        type: 'GET',
        url: 'www.baidu.com/getxxxx',
        success: res => {
            resolve(res);//成功
        }
    })
})
.then(value=>{
    console.log(value); //成功了
    /* return的东西可被下一个then接受到 */
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'GET',
            url: 'www.baidu.com/getxxxx',
            success: res => {
                resolve(res);//成功
            }
        })
    })
})
.then().then()
/* 相同的代码可封装成函数 */

.catch

错误处理

const p new Promise((resolve, reject) => {
    reject();
})
p.then().then().catch()

.all()

Promise.all([p1, p2, p3])用于将多个promise实例,包装成一个新的Promise实例,返回的实例就是普通的promise。

它接收一个数组作为参数,数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变,当所有的子Promise都完成,该Promise完成,返回值是全部值得数组,有任何一个失败,该Promise失败,返回值是第一个失败的子Promise结果

.race()

类似于.all() ,区别在于它有任意一个完成就算完成

参考

promise - 简书 (jianshu.com)

2020最好理解的Promise教程

BAT前端经典面试问题:史上最最最详细的手写Promise教程 - 掘金 (juejin.cn)