我是這麼使用axios的

時間  2019-11-29
標籤 使用 axios 简体版
原文   原文鏈接

首先在接觸前端的時候，用的網絡框架是vue-resource,可是看到官網上面上面說這個官網已經不怎麼維護了。因此我就轉移陣地到axios了。從使用到封裝，感受性能仍是挺不錯的。前端

1、 axios介紹

這個網絡框架是基於http客戶端的promise，面向瀏覽器和nodejs的。主要有以下幾個優點：vue

  • 瀏覽器端發起XMLHttpRequests請求
  • node端發起http請求
  • 支持Promise API
  • 監聽請求和返回
  • 轉化請求和返回
  • 取消請求
  • 自動轉化json數據
  • 客戶端支持抵禦

2、 安裝

npm install axios --save
複製代碼

或者使用cdnnode

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
複製代碼

3、 先來個示例

先來一個get請求jquery

axios.get('/user',{
    params:{
        name:'klivitam'
    }
}).then(function(response){
        console.log(response);
    }).catch(function(error){
        console.log(error)
    }

複製代碼

而後再來一個post請求ios

axios.post('/user',{
    name:'klivitam',
    address:'china'
})
.then(function(response){
    console.log(response);
})
.catch(function(error){
    console.log(error);
});
複製代碼

來個併發的操做：程序員

function getUserAccount(){
    return axios.get('/user/12345');
}

function getUserPermissions(){
    return axios.get('/user/12345/permissions');
}

axios.all([getUerAccount(),getUserPermissions()])
    .then(axios.spread(function(acc,pers){
        //兩個請求如今都完成
    }));
複製代碼

4、 axios 基本方法：

上面這兩段代碼介紹了get和post，除此以外，其實axios還支持不少：vue-router

  • axios.request(config)
  • axios.get(url,[config])
  • axios.delete(url,[config])
  • axios.head(url,[config])
  • axios.post(url,[data,[config]])
  • axios.put(url,[data,[config]])
  • axios.patch(url,[data,[config]])

5、 併發 Concurrency

  • axios.all(iterable)
  • axios.spread(callback)

6、 請求API配置

axios 可以在進行請求時進行一些設置。具體的代碼以下vuex

//發起 POST請求

axios({
    method:'post',
    url:'/user/12345',
    data:{
        name:'klivitam',
        address:'china'
    }
});
複製代碼

7、 請求設置

如下列出了一些請求時的設置。只有 url 是必須的，若是沒有指明的話，默認的請求方法是GET。npm

{
    //`url`是服務器連接，用來請求用
    url:'/user',
 
    //`method`是發起請求時的請求方法
    method:`get`,
 
    //`baseURL`若是`url`不是絕對地址，那麼將會加在其前面。
    //當axios使用相對地址時這個設置很是方便
    //在其實例中的方法
    baseURL:'http://some-domain.com/api/',
 
    //`transformRequest`容許請求的數據在傳到服務器以前進行轉化。
    //這個也支持`PUT`,`GET`,`PATCH`方法。
    //數組中的最後一個函數必須返回一個字符串，一個`ArrayBuffer`,或者`Stream`
    transformRequest:[function(data){
        //依本身的需求對請求數據進行處理
        return data;
    }],
 
    //`transformResponse`容許返回的數據傳入then/catch以前進行處理
    transformResponse:[function(data){
        //依須要對數據進行處理
        return data;
    }],
 
    //`headers`是自定義的要被髮送的頭信息
    headers:{'X-Requested-with':'XMLHttpRequest'},
 
    //`params`是請求鏈接中的請求參數，必須是一個純對象，或者URLSearchParams對象
    params:{
        ID:12345
    },
    
    //`paramsSerializer`是一個可選的函數，是用來序列化參數
    //例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params){
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },
 
    //`data`是請求提須要設置的數據
    //只適用於應用的'PUT','POST','PATCH'，請求方法
    //當沒有設置`transformRequest`時，必須是如下其中之一的類型（不可重複？）：
    //-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams
    //-僅瀏覽器：FormData,File,Blob
    //-僅Node：Stream
    data:{
        firstName:'fred'
    },
    //`timeout`定義請求的時間，單位是毫秒。
    //若是請求的時間超過這個設定時間，請求將會中止。
    timeout:1000,
    
    //`withCredentials`代表是否跨域請求，
    //應該是用證書
    withCredentials:false //默認值
 
    //`adapter`適配器，容許自定義處理請求，這會使測試更簡單。
    //返回一個promise，而且提供驗證返回（查看[response docs](#response-api)）
    adapter:function(config){
        /*...*/
    },
 
    //`auth`代表HTTP基礎的認證應該被使用，而且提供證書。
    //這個會設置一個`authorization` 頭（header），而且覆蓋你在header設置的Authorization頭信息。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },
 
    //`responsetype`代表服務器返回的數據類型，這些類型的設置應該是
    //'arraybuffer','blob','document','json','text',stream' responsetype:'json', //`xsrfHeaderName` 是http頭（header）的名字，而且該頭攜帶xsrf的值 xrsfHeadername:'X-XSRF-TOKEN'，//默認值 //`onUploadProgress`容許處理上傳過程的事件 onUploadProgress: function(progressEvent){ //本地過程事件發生時想作的事 }, //`onDownloadProgress`容許處理下載過程的事件 onDownloadProgress: function(progressEvent){ //下載過程當中想作的事 }, //`maxContentLength` 定義http返回內容的最大容量 maxContentLength: 2000, //`validateStatus` 定義promise的resolve和reject。 //http返回狀態碼，若是`validateStatus`返回true（或者設置成null/undefined），promise將會接受；其餘的promise將會拒絕。 validateStatus: function(status){ return status >= 200 && stauts < 300;//默認 }, //`httpAgent` 和 `httpsAgent`當產生一個http或者https請求時分別定義一個自定義的代理，在nodejs中。 //這個容許設置一些選選個，像是`keepAlive`--這個在默認中是沒有開啓的。 httpAgent: new http.Agent({keepAlive:treu}), httpsAgent: new https.Agent({keepAlive:true}), //`proxy`定義服務器的主機名字和端口號。 //`auth`代表HTTP基本認證應該跟`proxy`相鏈接，而且提供證書。 //這個將設置一個'Proxy-Authorization'頭(header)，覆蓋原先自定義的。 proxy:{ host:127.0.0.1, port:9000, auth:{ username:'cdd', password:'123456' } }, //`cancelTaken` 定義一個取消，可以用來取消請求 //（查看 下面的Cancellation 的詳細部分） cancelToke: new CancelToken(function(cancel){ }) } 複製代碼

8、 返回響應概要 Response Schema

一個請求的返回包含如下信息element-ui

{
    //`data`是服務器的提供的回覆（相對於請求）
    data{},
 
    //`status`是服務器返回的http狀態碼
    status:200,
 
 
    //`statusText`是服務器返回的http狀態信息
    statusText: 'ok',
 
    //`headers`是服務器返回中攜帶的headers
    headers:{},
 
    //`config`是對axios進行的設置，目的是爲了請求（request）
    config:{}

複製代碼

9、 攔截器 interceptors

你能夠在 請求 或者 返回 被 then 或者 catch 處理以前對他們進行攔截。

//添加一個請求攔截器
axios.interceptors.request.use(function(config){
    //在請求發送以前作一些事
    return config;
},function(error){
    //當出現請求錯誤是作一些事
    return Promise.reject(error);
});
 
//添加一個返回攔截器
axios.interceptors.response.use(function(response){
    //對返回的數據進行一些處理
    return response;
},function(error){
    //對返回的錯誤進行一些處理
    return Promise.reject(error);

複製代碼

若是你須要在稍後移除攔截器,你能夠

var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.rquest.eject(myInterceptor);
複製代碼

你能夠在一個axios實例中使用攔截器

var instance = axios.create();
instance.interceptors.request.use(function(){/*...*/});
複製代碼

10、 取消 Cancellation

你可使用 cancel token 取消一個請求

axios的cancel token API是基於cnacelable promises proposal，其目前處於第一階段。 你可使用 CancelToke.source 工廠函數建立一個cancel token，以下

var CancelToke = axios.CancelToken;
var source = CancelToken.source();
 
axios.get('/user/12345', {
    cancelToken:source.toke
}).catch(function(thrown){
    if(axiso.isCancel(thrown)){
        console.log('Rquest canceled', thrown.message);
    }else{
        //handle error
    }
});
 
//取消請求(信息參數設可設置的)
source.cancel("操做被用戶取消");
複製代碼

你能夠給 CancelToken 構造函數傳遞一個executor function來建立一個cancel token:

var CancelToken = axios.CancelToken;
var cancel;
 
axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c){
        //這個executor 函數接受一個cancel function做爲參數
        cancel = c;
    })
});
 
//取消請求
cancel();
複製代碼

注意：你可使用同一個cancel token取消多個請求。

11、 簡單的進行封裝一下axios

前面大概都聊了一下axios的一些使用辦法，可是做爲一個程序員 我仍是但願可以封裝代碼，達到統一管理的目的。我是這樣封裝的。 service.js:

import * as myapi from "./apis"
const userModule = {
  geyUser:{
    method:"get",
    url:myapi.USER_URL
  }
};
const userApi = {...userModule}

export default {
  userApi
}

複製代碼

http.js:

import axios from 'axios'
import qs from 'qs' //格式化工具
import * as myapis from './apis' //apis統一配置
import store from '../store' // vuex
import router from '../router' // vue-router
import {
  MessageBox,
  Message
} from 'element-ui' // element-ui提示框
const errorCode = Array.of(458, 459, 457, 456, 455, 500, 400, 422, 460); //指定的錯誤代碼
/**
 * BASEURL:
 *
 * @type {前綴分類}
 */
const TYPE_BASE_URL = 0X100;
const TYPE_BASE_STAT_URL = 0X101;
const TYPE_BASE_SCORE_URL = 0X102;
const TYPE_BASE_AD_URL = 0X103;

axios.interceptors.request.use(config => {
  if (typeof store.state.token === 'string') {
    config.headers.Authorization = store.state.token //判斷是否要加上token
  }
  return config
}, error => {
  return Promise.reject(error)
});

axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
});

function failState(res) {
  let errorTips = '請求失敗，請稍後再試';
  if (res) {
    if (res.includes('F_responseMsg')) {
      errorTips = res.data.F_responseMsg
    }
  }
  MessageBox.alert(errorTips, '舒適提示', {
    confirmButtonText: '肯定',
    callback: () => {
      Message.error(errorTips)
    }
  })
  return errorTips
}


function errorState(res) {
  let errorTips = res.message
  MessageBox.alert(errorTips, '舒適提示', {
    confirmButtonText: '肯定',
    callback: () => {
      Message.error(errorTips)
    }
  });
  return errorTips
}

function successState(res) {
  if (res.status === 200) {
    return res.data
  }
  if (res.status === 401) {
    MessageBox.alert('登錄信息已過時/帳號在別的地方登錄了', '舒適提示', {
      confirmButtonText: '肯定',
      callback: () => {
        router.replace({name: '/login'})
        store.dispatch('logout', '登陸信息已通過期')
      }
    })
    return '登陸信息已通過期'
  }
  if (res.status === 403) {
    router.push({path: '/forbid'})
    return '沒有操做權限'
  }
  if (res.data) {
    return res.data
  }
  return '服務器發生未知錯誤'
}

const httpServer = (opts, data = {}, type = TYPE_BASE_URL, ...paramsIndex) => {
  let URLBase = "";
  let URLIndex = opts.url;
  switch (type) {
    case TYPE_BASE_URL:
      URLBase = myapis.BASE_URL;
      break;
    case TYPE_BASE_STAT_URL:
      URLBase = myapis.BASE_STAT_URL;
      break;
    case TYPE_BASE_SCORE_URL:
      URLBase = myapis.BASE_SCORE_URL;
      break;
    case TYPE_BASE_AD_URL:
      URLBase = myapis.BASE_AD_URL;
  }
  // 添加參數 這個是可能會將參數放在url內 例如 /user/12345 我就暫時想到了這個拼接
  paramsIndex.forEach((it) => {
    URLIndex += "/" + it;
  })
  let httpDefaultOpts = {
    method: opts.method, // get 、post... 
    baseURL: URLBase, //base url
    url: URLIndex,
    timeout: 10000, //超時時間
    // responseType: 'json',//若是設置成json，服務器不返回爲json，responce爲空
    params: data, //數據
    data: qs.stringify(data), // qs格式化數據
    withCredentials: false, // 是否支持跨域
    headers: opts.method === 'get' ? {
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=UTF-8'
    } : {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    }
  }

  if (opts.method === 'get' && httpDefaultOpts.data) {
    delete httpDefaultOpts.data
  } else {
    delete httpDefaultOpts.params
  }

  return new Promise(function (resolve, reject) {
    axios(httpDefaultOpts).then(
      res => {
        if (typeof res === "undefined" || !res.status) {
          reject(failState(null))
          return;
        }
        if (errorCode.includes(res.status)) {
          reject(failState(res))
        } else {
          resolve(successState(res))
        }
      }
    ).catch(
      error => {
        reject(errorState(error))
      }
    )
  })
};

export default httpServer

複製代碼

說在最後

這篇文章呢？ 其實寫的並很差 我本身封裝的效果呢？其實也就通常般，感受還有待優化的空間。我在這裏擺出來是但願那些前端的大佬能給我寫的代碼有一些建議。若是有 小弟不勝感激😂😂😂。好了週末也差很少快結束了，出去吃飯了 出去ci飯了 好餓呀！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程