最近经常看到这个问题,及来记录下个人的理解和看法
promise英文翻译是承诺,那么我们可不可以理解为,承诺它过一段时间会给你一个结果
首先来看看这个promise到底是解决了什么问题
用ajax来举例,只是用来举例子
ajax(function(请求结果1){
ajax2(function(请求结果2){
ajax3(function(请求结果3){
ajax4(function(请求结果4){
})
})
})
})
我人直接傻了,这不是回调地狱吗
再来看看promise是怎么解决这个问题的
首先看看官方参数
一共有三种状态,分别为pending(进行中)、fulfilled(已成功)和rejected(已失败)
看得越来越晕,代码基本没这几个参数,看看就行
那promise到底是怎么解决这个问题的呢
基本解决的思路如下
let 请求结果1 = ajax1();
let 请求结果2 = ajax2(请求结果1);
let 请求结果3 = ajax3(请求结果2);
let 请求结果4 = ajax4(请求结果3);
像不像烤串一样的串起来了,说着说着就饿了
再来看看promise基本代码,
new Promise(
function(reslove,reject) {
reslove('成功')
}
).then(
res =>{console.log(res)}//打印出"成功"
).catch(
)
有注释的
new Promise(
function(reslove,reject) { // reslove,reject这两个参数必须带,不然会报错
reslove('成功') //返回到then
//注意 注意 reslove和reject只能返回一个,要么then(成功),要么catch(失败),都写的话返回前面的一个
reject("失败") //返回到catch
}
).then(
res =>{
console.log(res) //打印出"成功"
}
).catch(
res => {
console.log(res) //打印出"失败"
})
那么再来看看怎么像串羊肉串一样解决回调地狱的问题呢
简写如下
new Promise(
function(reslove,reject) {
reslove('成功1')
}
).then(
// ajax1
).then(
//ajax2
).then(
//ajax3
)then(
//ajax4
).catch(
//处理异常
)
最后看看完整代码实现,先定义ajax
function ajax1(resolve,reject){
resolve("请求结果1");
}
function ajax2(resolve, reject){
resolve ("请求结果2");
}
function ajax3(resolve,reject){
resolve("请求结果3");
}
function ajax4(resolve,reject){
resolve("请求结果4");
}
我们再来带入到开头的prmoise中
new Promise(ajax1).then(("请求结果1")=>{
return new Promise(ajax2);
}).then(("请求结果2")=>{
return new Promise(ajax3);
}).then(("请求结果3")=>{
return new Promise(ajax4);
})
个人见解,如有不对,多多指出,多谢!