一、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