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