1. 程式人生 > >js中promise的幾種用法

js中promise的幾種用法

promise解釋:

一種非阻塞非同步執行的抽象概念.

如果我們想在promise之後執行某些操作,只能通過then回撥(請求成功時)或者catch回撥(請求失敗時),整個函式又會返回一個promise,只會在then裡執行下一步操作.

let success = Promise.resolve("success");
let failure = Promise.reject("failure");

let res_success =  success.then(res=>{ console.log("成功了:"+res) }).catch(err=>{ console.log("失敗了:"+err) });//then裡執行

let res_failure = failure .then(res=>{ console.log("成功了:"+res) }).catch(err=>{ console.log("失敗了:"+err) });//catch裡執行

//同時 res_success和res_failure也是一個promise
//我們能在then回撥裡拿到success或failure的then或catch裡返回的結果(如果沒返回則是undefined)

幾個應用場景:

  1. 有順序的執行某些請求,我們把每個請求(promise形式)串起來搞成鏈式呼叫.
  2. //驗證
    function getAuth(){
        return new Promise((res,rej)=>{
            //關鍵程式碼
        })
    }
    //使用者資訊
    function getUsers(){
        return new Promise((res,rej)=>{
            //關鍵程式碼
        })
    }
    //頁面資訊
    function getPageInfo(){
        return new Promise((res,rej)=>{
            //關鍵程式碼
        })
    }
    //請求順序:先驗證 => 再拿使用者 => 再拿頁面資訊
    getAuth().then(res => {
        if(res.success){
            //驗證通過,請求使用者資訊
            return getUsers();
        }else{
            return Promise.reject();
        }
    }).then(res => {
        if(res.success){
            //成功獲取使用者資訊,請求頁面資訊
            return getPageInfo();
        }else{
            return Promise.reject();
        }
    }).then(res => {
        if(res.success){
            //成功獲取頁面資訊,反射資料到檢視上
    
            //over request
        }
    })
  3. 同時傳送多個關聯請求,使用Promise.all([ promise1,promise2 ])(只要失敗一個就算失敗);
  4. 同時傳送多個並行的請求,失敗的記錄,成功的執行相應的邏輯
  5. function requestMain(urls,successfn,failurefn){
        //圖片url資源路徑
        let urls = [
         'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2363246672,1942618513&fm=58',                      
         'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4138785756047,2461366902&fm=58',           
         'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=378711121878161,3674972757&fm=58',
         'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2412121295993728,2346220807&fm=58',
        ];
        let errorArr = [];//記錄錯誤的資訊
        //構建promise的函式
        function generatePromise(url){
            return new Promise((res,rej)=>{
                //
            })
        }
        //
        urls.reduce((promise,url,index)=>{
            promise.then(res => {
                //請求成功執行的回撥
                successfn(res);
            }).catch(err=>{
                //失敗時,記錄失敗資訊
                errorArr.push(err);
            }).then(()=>{
                if(index === urls.length-1 && errorArr.length > 1){
                    //全部請求完,並且錯誤陣列不為空時執行回撥
                    failurefn(errorArr);
                }else{
                    promise = generatePromise(url)
                }
            })
        },Promise.reject(false))
    }