Js Promise 用法

主要用途 : 異步請求需要多次請求,代碼大同小異,維護工作量大

下面 是ES6 簡單封裝 Promise 用法

文章用意:  主要是理解 promise 以及如何解決異步多次請求造成的閱讀困難等問題!  

下面給出具體實現代碼以及測試截圖:

 // url  相當於ajax 的一下參數,目前我這里只有url 
    request({ url: "https://xxxxx/api/public/v1/home/swiperdata" })
    .then(result => {
      this.setData({
        switchlist: result.data.message
      });
      //我們在調用  第二個請求, 將在第二個then 中執行,並且獲取
      return request({ url: "https://www.cgrain.top/xxxxx", 
      method: "Get", data: { "test": result.data.message[0].open_type } });
    })
      // 假如 還有個ajax 只需要一直then 下去就可以了
      .then(result => { 
        console.log(result);
        return request({ url: "https://www.cgrain.top/xxxxx", method: "Get", data: { "test":"手動增加,第三" } });

      })
      .catch(err => {
        console.log(err);

      })
      .then(result=>{

        console.log(result);
      })

 

export const request = (parame) => {
  return new Promise((resolve, reject) => {
        wx.request({
            ...parame,
            success: (result) => {
                resolve(result);
            },
            fail: (err) => {
                reject(err);
            }
        });

    })
}

　　

 

 

html 測試(貌似不兼容ie)

 

promise.js

function Ajaxfun(prame) {
    return new Promise((resolve, reject) => {
        $.ajax({
            ...prame,
            success: (reselt) => {
                resolve(reselt);
            },
            error: (error) => {
                reject(error);
            }
        });
    }); 
}

<script>
    Ajaxfun({ url: "https://cgrain.top/api/xxx" }).then(resule => {
        console.log(resule);
    }).catch(resule => {
        console.log(resule);
    }); 

</script>

更新-------- 這樣子寫, 經過編譯,其實變成了這樣:

export const request = (parame) => {
    ajaxTimes++;
    wx.showLoading({
        title: "數據加載中...",
        mask: true
    });
    ///封裝url 全局統一
    const baseUrl = "https://api.zbztb.cn/api/public/v1";
    return new Promise((resolve, reject) => {
   //   debugger
        wx.request({
            ...parame,
            url: baseUrl + parame.url,
            success: (result) => {
                resolve(result);
            },
            fail: (err) => {
                reject(err);
            },
            complete: () => {
                ajaxTimes--;
                if (ajaxTimes == 0) {
                    wx.hideLoading();
                }
            }
        });

    })
}

編譯過的:

//  同時 發送異步代碼次數
var ajaxTimes = 0;

var request = function request(parame) {
  ajaxTimes++;
  wx.showLoading({
    title: "數據加載中...",
    mask: true
  }); ///封裝url 全局統一

  var baseUrl = "https://api.zbztb.cn/api/public/v1";
  return new Promise(function (resolve, reject) {
    //   debugger
    wx.request(_objectSpread({}, parame, {
      url: baseUrl + parame.url,
      success: function success(result) {
        resolve(result);
      },
      fail: function fail(err) {
        reject(err);
      },
      complete: function complete() {
        ajaxTimes--;

        if (ajaxTimes == 0) {
          wx.hideLoading();
        }
      }
    }));
  });
};

exports.request = request;
 
});

 

 

 

 

博客園也用到了Promise

 

 

 

更新寫法

 

 

    const res = await request({ url: "/goods/detail", data: { "goods_id": goods_id } });

直接接收 成功返回的值

 

 

更新 [基於 axios 進行的二次封裝]

/* 我們對  axios 進行二次封裝 原因是 ,盡可能的 減少我們 個個請求依賴 axios , 
而集中控制我們的請求 都來自與這個js 的這個 request 方法,這樣 ,我們 需要換其他請求庫,就不用每個頁面都改 ,
而只要 把  request 方法改一下就行了,    上層代碼 不過於依賴底層,減少耦合 ---> 依賴倒置   
現在這個 文件,就相當於 抽象接口,所有 請求都要集成它
*/
export function request(config) {
    //1 創建axios 實例
    const instance = axios.create({
        baseURL: 'api',
        timeout: 5000
    });

    // 3 對請求進行攔截,這個自己有需要 就可以寫
    instance.interceptors.request.use(config => {
        //攔截成功請求 ,比如
        //1 加載動畫
        //2 檢查url 增加 token

        // 假如不返回,就會出錯,記住我們還需要返回過去
        console.log("axios  成功攔截",config);        
        return config
    }, err => {
        //攔截失敗請求
        console.log("axios  失敗攔截",err);
        return err;
    });
    //3 對響應進行攔截
    instance.interceptors.response.use(result=>{

        console.log(" axios  響應成功攔截",result);
        //這里 對所需要的數據進行返回
        return result.data.data;
    },errlesult=>{
        console.log(" axios 響應失敗攔截",errlesult);
        // 比如  返回 401 無權限, 404 頁面找不到, 500 服務器錯誤 就在這里

        return errlesult;
    });

    // 2 調用 axios 實例,並且返回  
    return instance(config); //axios 本身就用了 promise 
}

request({ url: "/home/multidata" }).then(res=>{
console.log(res);
});

 

2021-7-31 更新

      Health(this.account, this.model)
        .then((result) => { 
          return PostCaptche(result.response.captchaType); // 這是另外一個方法,需要第一個接口返回的參數
        })
        .then((res) => {
          if (res) { 
              return;
            }
            this.CaptchaStatus("驗證碼加載中...", false); 
          }
        })
        .catch((err) => {  // 他們會共用一個catch
          this.$Loading.error();
          this.CaptchaStatus("安全檢測失敗", false); 
        });
    },