promise用法及理解

167 阅读2分钟

最近经常看到这个问题,及来记录下个人的理解和看法

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);
})

个人见解,如有不对,多多指出,多谢!