快捷導航

Vue Promise的axios請求封裝詳解

更新時間：2018年08月13日 09:34:19 作者：butterflyer

這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

現(xiàn)在應該大部分公司都是前后端分離了。so，數(shù)據(jù)請求的封裝還是必須的。

為了實現(xiàn)向ios中block封裝請求的異步的效果，我采用JavaScript中promise這個對象。

 var p1 = New promise((resolve,reject)=>{
 var timeOut = Math.random() * 2;
  log('set timeout to: ' + timeOut + ' seconds.');
  setTimeout(function () {
    if (timeOut < 1) {
      log('call resolve()...');
      resolve('200 OK');
    }
    else {
      log('call reject()...');
      reject('timeout in ' + timeOut + ' seconds.');
    }
  }, timeOut * 1000);
})

其中resolve,reject就相當于是你定義了兩個block，然后把數(shù)據(jù)傳出去。

繼續(xù)往下看,緊接著上面的代碼

var p2 = p1.then(function (result) {  //resolve 導出的數(shù)據(jù)
  console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) { //reject 導出的數(shù)據(jù)
  console.log('失敗：' + reason);
});

通過查閱資料還發(fā)現(xiàn)另外兩種用法，Promise.all 和 Promise.race這兩種。

var p1 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 600, 'P2');
});
// 同時執(zhí)行p1和p2，并在它們都完成后執(zhí)行then:
Promise.all([p1, p2]).then(function (results) {
  console.log(results); // 獲得一個Array: ['P1', 'P2']
});

這一種是p1 和 p2 都返回了數(shù)據(jù)，才會執(zhí)行all后面的then函數(shù)。挺像ios中GCD的notify函數(shù)

第二種

var p1 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
  console.log(result); // 'P1'
});

race跑步的意思，看誰跑得快，跑得慢的就被摒棄掉了。

上面這些是封裝的基礎(chǔ)，下面來看具體應用#

基于axios的請求封裝

//判斷請求環(huán)境來區(qū)分鏈接 生產(chǎn)環(huán)境和測試環(huán)境
const ajaxUrl = env === 'development' ? 
  'https://www.baidu.com' :
  env === 'production' ?
  'https://www.baidu.com' :
  'https://www.baidu.com';

util.ajax = axios.create({
  baseURL: ajaxUrl,
  timeout: 30000
});
// options中包含著數(shù)據(jù)
export function axiosfetch(options) {
  
  return new Promise((resolve, reject) => {
    var token = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : "";
    var cid = window.localStorage.getItem('X-CID') ? window.localStorage.getItem('X-CID') : "";
    // var language = window.localStorage.getItem('language') ? window.localStorage.getItem('language') : "";
    
    var language = tools.getCookie('language')?tools.getCookie('language'): navigator.language;
    language = language == "en-US" ? "en" : language ;
    debug.log(language)
    var params = tools.deepClone(options.params);//深拷貝
    var sign_str = tools.sign(params); //簽名
    const instance = axios.create({
      baseURL: ajaxUrl,
      timeout: 30000,
      //instance創(chuàng)建一個axios實例，可以自定義配置，可在 axios文檔中查看詳情
      //所有的請求都會帶上這些配置，比如全局都要用的身份信息等。
      headers: { //所需的信息放到header頭中
        // 'Content-Type': 'application/json',
        "Authorization": token,
        "X-CID":cid,
        "X-LOCALE":language,
        "X-SIGN":sign_str
      },
      // timeout: 30 * 1000 //30秒超時
    });
    
    let httpDefaultOpts = { //http默認配置
      method:options.method,
      url: options.url,
      timeout: 600000,
      params:Object.assign(params),
      data:qs.stringify(Object.assign(params)),
      // headers: options.method=='get'?{
      //   'X-Requested-With': 'XMLHttpRequest',
      //   "Accept": "application/json",
      //   "Content-Type": "application/json; charset=UTF-8",
      //   "Authorization": token
      // }:{
      //   'X-Requested-With': 'XMLHttpRequest',
      //   'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      //   "Authorization": token
      // }
    }

    if(options.method=='get'){ //判斷是get請求還是post請求
      delete httpDefaultOpts.data
    }else{
      delete httpDefaultOpts.params
    }
    instance(httpDefaultOpts)
      .then(response => {//then 請求成功之后進行什么操作
        debug.log('參數(shù):')
        debug.log(options.params)
        debug.log('響應:')
        debug.log(response)
        debug.log(response.data.errno)
        if(response.data.errno == 401){
          // alert(response.data.errmsg)
          // window.location.href = window.location.protocol + "http://" +window.location.host + '/#/login'
          return
        }
        if(response.data.errno == 400){
          reject(response)
          return
        }
        resolve(response)//把請求到的數(shù)據(jù)發(fā)到引用請求的地方
      })
      .catch(error => {
        // console.log('請求異常信息=>：' + options.params + '\n' + '響應' + error)
        debug.log('請求異常信息=>：' + options.params + '\n' + '響應' + error)
        reject(error)
      })
  })
}

外面再包一層

export function getNodeDetailInfo(address) {
  return axiosfetch({
    url:api.nodeDetailAPI,//鏈接
    method:"get",//get請求
    params:{//數(shù)據(jù)
      address:address
    }
  })
}

再下面就是實際應用。

   getNodeDetailInfo(address).then(res => {
          var data = res.data.data;
        }).catch(error => {
          console.log(error, '請求失敗')
        })

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: