1. 程式人生 > >用axios封裝一個jq版的ajax

用axios封裝一個jq版的ajax

  * 封裝axios,減少學習成本,引數基本跟jq ajax一致
  * @param {String} type            請求的型別,預設post
  * @param {String} url             請求地址
  * @param {String} time            超時時間
  * @param {Object} data            請求引數
  * @param {String} dataType        預期伺服器返回的資料型別,xml html json ...
  * @param {Object} headers         自定義請求headers
  * @param {Function} success       請求成功後,這裡會有兩個引數,伺服器返回資料,返回狀態,[,data res]
  * @param {Function} error     傳送請求前
  * @param return 
import axios from 'axios';
var Rxports={
      ajax:function (opt){

        let self = this;
        var opts = opt || {};

        if (!opts.url) {
            alert('請填寫介面地址');
            return false;
        }
        let obj={
            method: opts.type || 'post',
            url: opts.url,
            headers
: opts.headers || { 'Content-Type':'application/x-www-form-urlencoded', }, // `baseURL` 將自動加在 `url` 前面,除非 `url` 是一個絕對 URL。 // 它可以通過設定一個 `baseURL` 便於為 axios 例項的方法傳遞相對 URL // baseURL:'https://www.precise.com/www/', baseURL:self.apiURI(), timeout
: opts.time || 10*1000, responseType: opts.dataType || 'json', } opts["data"] = opts["data"]||{}; //進行資料深度拷貝。防止修改資料時將原始資料汙染; let str = JSON.stringify( opts["data"]); opts["data"] = JSON.parse(str); opts["data"]["token"] = opts["data"]["token"] || self.getToken("token")["token"]; //this.Log(opts["data"]["token"]); if( opts.type =='post'){ obj.data = qs.stringify(opts.data || {}) }else{ obj.params = opts.data || {} } axios(obj).then(function(res){ if(res.status == 200 ){ if(opts.success){ opts.success(res.data,res); if(res.data.t && res.data.t.length>0){ modal.show(res.data.t,self.getToken('token')['token'],self.apiURI()); console.log('ajax',res.data.t) } } }else{ if (data.error) { opts.error(error); }else{ console.log('網路故障' + data.error); } } }).catch(function (error){ console.log('回撥處理錯誤',error); if (opts.error) { opts.error(error); }else{ // console.log('網路故障'); } }); } }