在vue項目中，和后臺交互獲取數據這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防御cSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。

安裝

npm install axios; // 安裝axios

好了，下面開始今天的正文。

此次封裝用以解決： （對于登錄功能的可以直接使用，其他網絡請求也可以直接用，如果有潔癖，可以把token有關的幾行代碼刪掉）

ps:使用時得的引入axios時： import axios from '這個文件的名字及相對路徑'

/** * 封裝網絡請求 */import axios from "axios"import qs from "querystring"import store from '../store'import router from '../router'//token過期之后重新回登錄界面const toLogin = () =>{ router.push("/login")}// 錯誤信息響應方法const errroHandle = (status,other) => { switch(status){  case 400:   console.log("服務器無法理解請求信息");   break;  case 401:   console.log("用戶信息驗證失敗");   localStorage.removeItem("token"); // 可選項   toLogin();   break;  case 403:   console.log("請求被限制");   localStorage.removeItem("token"); // 可選項   toLogin();   break;  case 404:   console.log("客戶端請求信息錯誤");   break;  default:   console.log(other);   break; }}// 創建axios對象const instance = axios.create({ timeout:5000})// 掛在全局對象instance.defaults.baseUrl = "";instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 攔截器：請求攔截和響應攔截 post請求參數需要轉碼// axios的返回值對象要求是一個promise對象instance.interceptors.request.use(config =>{ if(config.method === "post"){  config.data = qs.stringify(config.data) } if(store.state.token){  config.headers.authorization = store.state.token; } return config;},error => Promise.reject(error))instance.interceptors.response.use( // 成功 response => response.status === 200 ? Promise.resolve(response) :Promise.reject(response), // 失敗 error => {  const { response } = error;  if(response){   errroHandle(response.status,response.data)   return Promise.reject(response)  }else{   // 錯誤信息都無法返回   console.log("請求被中斷");  } })export default instance

總結

以上所述是小編給大家介紹的封裝一下vue中的axios示例代碼詳解，希望對大家有所幫助！