谈谈自己对promise的理解

一、Promise为何产生

Promise是一种异步解决方案，因为Promise可以让异步回调变得更简单，其具有以下特点

• Promise的状态有三种，pending(执行状态)、成功状态(fulfilled)、失败状态(rejected),只有构造函数传入的code执行结果才会改变Promise的状态(在后面我将成功状态叫resolved）
• 只要新建就会执行
• Promise构造函数中传入的code会立即被执行，但是then属于微任务

二、promise的基本使用

let p = new Promise((resolve, reject) => {
    let result = ''
    // code
    if(result == 200) {
        resolve()
    }else {
        reject()
    }
})

• 构造函数中传参为一个函数，该函数有两个参数resolve和reject，函数体通常包含一个异步的请求
• 新建即被执行，上面的代码在被解析时就会立即执行

三、resolve和reject

• resolve: resolve函数是会将Promise的状态从pending状态更新为resolved状态，且执行Promise.then中的第一个参数
• reject: reject函数是会将Promise的状态从pending状态更新为reject状态，且执行Promise.then中的第二个参数

四、Promise.then

• 方式一：定义Promise.then在then中传入两个参数,第一个函数对应resolve返回的函数，第二个函数对应reject返回的函数

  let p = new Promise((resolve, reject) => { let result = '' // code if(result == 200) { resolve() }else { reject() }})p.then((value) => { console.log(value)}, (error) => { console.log(error)})

五、Promise.catch

• 作用：当then中的第一个参数对应的函数执行结果为null或undefined的情况下，会执行catch中定义的代码段

  let p = new Promise((resolve, reject) => { let result = '' // code if(result == 200) { resolve() }else { reject() } }) p.then((value) => { return undefined }, (error) => { console.log(error) }).catch( err => { console.log(err) })

  // 上述代码的执行结果是undefined

六、Promise.finally

• 作用：无论Promise最后的状态如何，都会执行的操作

  let p = new Promise((resolve, reject) => { let result = '' // code if(result == 200) { resolve() }else { reject() } }) p.then((value) => { return undefined }, (error) => { console.log(error) }).catch( err => { console.log(err) }).finally(() => { console.log('finally') }) //上述执行结果 undefined finally

七、promise.all

• 作用：将多个Promise包装成一个Promise实例，传入的参数是一个数组，每个数组元素都是一个Promise

• 特点：只有每个Promise都返回fulfilled才会使得新封装的这个Promise的状态为成功，否则只要其一失败即为失败状态

  // 生成一个Promise对象的数组 const promises = [2, 3, 5, 7, 11, 13].map( (id) => { return getJSON('/post/' + id + ".json"); });

  Promise.all(promises).then( (posts) => { // ... }).catch((reason) => { // ... });

八、手写Promise

function PromiseFun(f) {
    this.status = 'pending';
    this.resolveCallback = function() {}
    this.rejectCallback = function() {}
    this.catchCallback = function() {}
    this.finallyCallback = function() {}
    f()
    function resovle(value) {
        this.status = 'fulfilled'
        return this.resolveCallback(value)
    }
    function reject(error) {
        this.status = 'rejected'
        return this.rejectCallback(error)
    }
}
PromiseFun.prototype.then = function (f1, f2) {
    this.resolveCallback = f1
    this.rejectCallback = f2
}
PromiseFun.prototype.catch = function (f) {
    this.catchCallback = f
}
PromiseFun.prototype.finally = function (f) {
    this.finallyCallback = f
}
function f(resolve, reject) {
    let result = 200
    if(result === 200) {
        resolve(result)
    }else {
        reject(result)
    }
}
let p = new Promise(f).then((v) => {
  console.log("我是参数f1")
  console.log(v)
}, (e) => {
  console.log("我是参数f2")
  console.log(e)
})
// 打印结果
我是参数f1
200