Promise小结

基本用法

1声明一个Promise对象

// 方法1 let promise = 
  new Promise ( (resolve, reject) => { 
        if ( success ) { resolve(a) // pending ——> resolved 参数将传递给对应的回调方法 } 
        else { 
            reject(err) // pending ——> rejectd
         } 
        } ) 
// 方法2 
  function promise () { 
    return new Promise ( 
        function (resolve, reject) { 
            if ( success ) { resolve(a) } 
            else { reject(err) }
         } ) }

2Promise.prototype.then() VS Promise.prototype.catch()

.then()方法使Promise原型链上的方法，它包含两个参数方法，分别是已成功resolved的回调和已失败rejected的回调

promise.then(
    () => { console.log('this is success callback') },
    () => { console.log('this is fail callback') }
)

.catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致。但是由于Promise的抛错具有冒泡性质，能够不断传递，这样就能够在下一个catch()中统一处理这些错误。同时catch()也能够捕获then()中抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误

promise.then(
    () => { console.log('this is success callback') }     
).catch(
    (err) => { console.log(err) }
)

在异步请求中的调用对比

 

在ajax请求中

function getLyric (){
  var lyric=null
    $.ajax({
        type: "POST",
        data : " ",       
        dataType: "JSON",
        async: true,
        url: "",
        success: function(response) {                                             //第一步请求成功拿到返回值后
                        if (response.status == 'ok') {                          
                                   lyric=Base64.decode(response.lyric);      //拿到res.data后对lyric赋值
                            } else {                                  
                                    lyric='no lyric';
                            }
        }
    })
   return lyric
}

//调用
var lyric=getLyric ()  //此时lyric可能有2种值，需要区分判断

在axios请求中

在axios中 Promise可以很好的解决异步请求数据获取和对数据进行操作的时间先后问题。将数据操作都放在.then()函数中还保证了此时数据获取的有效性

getLyric(){
  if(this.lyric){
    return Promise.resolve(this.lyric);
  }
  return new Promise((resolve,reject)=>{
       axios.get(url,{params:data}).then((res)=>{                                       //第一步请求成功拿到返回值
         return Promise.resolve(res.data);                                                    //return 出来Promise.resolve在.then中能拿到res.data
       }).then((response)=>{                
      if(response.retcode==ERR_OK){
        this.lyric=Base64.decode(response.lyric);            //拿到res.data后对lyric赋值
        resolve(this.lyric);                                 //如果ok处理  此时调用getLyric().then((res)=>{res})  中的res就是this.lyric
      }
      else{
        reject('no lyric');
      }
    })
  })
}


调用不需要做判断
getLyric().then((res)=>{
   console.log(res)          //this.lyric的值
}).catch((err)=>{
    console.log(err)        //no lyric
})