詳解vue中Axios的封裝與API介面的管理

linmu發表於2020-01-05

此次封裝分為初級版和進階版兩部分，初級版可做練手使用。實際上， axios 封裝與否皆可做專案，在元件內正常發起請求也是最原始的方式，但隨著前端的發展越來越快，專案體量的增大，必然會更加需要模組化的思想，在這裡把 axios 看做一個發起請求的模組即可...

準備工作

目錄結構初始化

首先，假設你的目錄結構如圖：

每個人可能有不同的程式碼目錄，這個不同強求完全一致，理解封裝思想即可。

至於每個目錄結構是做什麼的，傳送門從零使用vue-cli3+webpack4搭建專案

axios簡單介紹

在 vue 專案中，和後臺互動獲取資料這塊，我們通常使用的是 axios 庫，它是基於 promise 的 http 庫，可執行在瀏覽器端和 node.js 中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換 json 、客戶端防禦 XSRF 等。所以 vue 作者也是果斷放棄了對其官方庫 vue-resource 的維護，直接推薦我們使用 axios 庫。如果還對 axios 不瞭解的，可以移步axios文件。

安裝axios

npm install axios 
複製程式碼

初級版axios封裝

有 vue 封裝經驗的小夥伴請跳過初級部分，直接檢視進階版即可。

在config中index.js中的內容

node 中 qs 的知識點請參考官方文件

** qs.parse() 將 URL 解析成物件的形式 qs.stringify() 將物件序列化成 URL 的形式，以 & 進行拼接**

import axios from "axios"; 
import qs from "qs";

// 延時時間
const http = axios.create({
  //baseURL:"XXXX",
  timeout: 5000
})


//請求攔截
http.interceptors.request.use((config) => {
  // post請求對請求資料進行序列化
  if (config.method === "post") {
    config.data = qs.stringify(config.data);
  }
  return config;

}, (err) => {
  return Promise.reject(err);
})



//響應攔截
http.interceptors.response.use((res) => {
  return res.data;
}, (err) => {
  return Promise.reject(err);
})


export default (method, url, data = null) => {
  if (method == "post") {
    return http.post(url, data);
  } else if (method == "get") {
    return http.get(url, {
      params: data
    });
  } else {
    return;
  }
}

複製程式碼

API統一管控

在api資料夾login.js中對請求的管控，如果專案龐大，分檔案管控請求更方便，login.js統一管控登入介面：

// 引入
import http from "../config/index.js"

const RegCode = (arg) => http("post","/node/user/getCode", arg)
const Register=(arg)=>http("post","/node/user/register",arg)
const LoginBtn=(arg)=>http("post","/node/user/login",arg)
let Login={
  RegCode,
  Register,
  LoginBtn
}
// 匯出
export default Login

複製程式碼

在vuex中login.js的使用方式

import Login from "../../api/login"
const state = {
  loginState: false
}
// 在actions中做非同步請求，通過async、await可是非同步請求同步執行
const actions = {
  async actionLogin({
    commit
  }, params) {
    let loginData = await Login.LoginBtn(params)
    commit("mutateLogin", loginData)
  }
}

const mutations = {
  mutateLogin(state, params) {
    if (params.state = 1) {
      state.loginState = true
      alert('login success')
    } else {
      alert('login fail')
    }
  }
}

export default {
  state,
  mutations,
  actions,
  namespaced: true
}

複製程式碼

在其他需使用的元件裡直接呼叫即可

/* 新建了一個非常簡易的模板，便於理解 */
<template>
  <div id='app'>
    <div @click="handlerLogin">登入</div>
  </div>
</template>
<script>
//匯入元件
import Vuex from "vuex"
export default {
  name: 'App',
  methods: {
    ...Vuex.mapActions({
      handlerLogin: "login/actionLogin"
    })
  }
}
</script>
<style>
/* 樣式程式碼 */
#app {
}
</style>
複製程式碼

以上，初級版的axios封裝已完成。

進階版axios封裝

此部分會更詳細一些，希望大家多提建議。

引入( config 資料夾下的 index.js 中)

// 在http.js中引入axios
import axios from 'axios'
// 引入qs模組，用來序列化post型別的資料
import QS from 'qs'
// mint-ui的toast提示框元件，大家可根據自己的ui元件更改
import { Toast } from 'mint-ui';
複製程式碼

專案中如何使用mint-ui，請參考官方文件

環境的切換

我們的專案環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來匹配我們的預設的介面url字首。axios.defaults.baseURL可以設定axios的預設請求地址就不多說了。

// 環境的切換
if (process.env.NODE_ENV === 'development') { 
 axios.defaults.baseURL = 'https://www.development.com';} 
else if (process.env.NODE_ENV === 'test') { 
 axios.defaults.baseURL = 'https://www.test.com'
} 
else if (process.env.NODE_ENV === 'production') { 
 axios.defaults.baseURL = 'https://www.production.com'
}
複製程式碼

設定請求超時

通過axios.defaults.timeout設定預設的請求超時時間。例如超過了10s，就會告知使用者當前請求超時，請重新整理等。

axios.defaults.timeout = 10000;
複製程式碼

post請求頭的設定

post請求的時候，我們需要加上一個請求頭，所以可以在這裡進行一個預設的設定，即設定post的請求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
複製程式碼

請求攔截

我們在傳送請求前可以進行一個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要使用者登入之後才能訪問的，或者post請求的時候，我們需要序列化我們提交的資料。這時候，我們可以在請求被髮送之前進行一個攔截，從而進行我們想要的操作。

// 先匯入vuex,因為我們要使用到裡面的狀態物件
// vuex的路徑根據自己的路徑去寫，token儘量寫成本地儲存的形式，不然的話vuex重新整理之後就沒有了
import store from '@/store/index';

// 請求攔截器
axios.interceptors.request.use( config => { 
// 每次傳送請求之前判斷vuex中是否存在token 
// 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登入情況
// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 
  const token = store.state.token
  token && (config.headers.Authorization = token)
  return config
}, error => { 
  return Promise.error(error)
})
複製程式碼

這裡說一下token，一般是在登入完成之後，將使用者的token通過localStorage或者cookie存在本地，然後使用者每次在進入頁面的時候（即在main.js中），會首先從本地儲存中讀取token，如果token存在說明使用者已經登陸過，則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，後臺人員就可以根據你攜帶的token來判斷你的登入是否過期，如果沒有攜帶，則說明沒有登入過。這時候或許有些小夥伴會有疑問了，就是每個請求都攜帶token，那麼要是一個頁面不需要使用者登入就可以訪問的怎麼辦呢？其實，你前端的請求可以攜帶token，但是後臺可以選擇不接收啊！

響應攔截

// 響應攔截器
axios.interceptors.response.use( 
 response => { 
 // 如果返回的狀態碼為200，說明介面請求成功，可以正常拿到資料 
 // 否則的話丟擲錯誤
 if (response.status === 200) {  
  return Promise.resolve(response); 
 } else {  
  return Promise.reject(response); 
 } 
 }, 
 // 伺服器狀態碼不是2開頭的的情況
 // 這裡可以跟你們的後臺開發人員協商好統一的錯誤狀態碼 
 // 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
 // 下面列舉幾個常見的操作，其他需求可自行擴充套件
 error => {  
 if (error.response.status) {  
  switch (error.response.status) {  
  // 401: 未登入
  // 未登入則跳轉登入頁面，並攜帶當前頁面的路徑
  // 在登入成功後返回當前頁面，這一步需要在登入頁操作。  
  case 401:   
   router.replace({   
   path: '/login',   
   query: { 
    redirect: router.currentRoute.fullPath 
   }
   });
   break;
 
  // 403 token過期
  // 登入過期對使用者進行提示
  // 清除本地token和清空vuex中token物件
  // 跳轉登入頁面  
  case 403:
   Toast('登入過期，請重新登入');
   // 清除token
   localStorage.removeItem('token');
   store.commit('loginSuccess', null);
   // 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，登入成功後跳轉需要訪問的頁面 
   setTimeout(() => {   
   router.replace({    
    path: '/login',    
    query: { 
    redirect: router.currentRoute.fullPath 
    }   
   });   
   }, 1000);   
   break;
 
  // 404請求不存在
  case 404:
   Toast('網路請求不存在');
   break;
  // 其他錯誤，直接丟擲錯誤提示
  default:
   Toast(error.response.data.message);
  }
  return Promise.reject(error.response);
 }
 } 
});
複製程式碼

要注意的是，上面的Toast()方法，是我引入的mint-ui庫中的toast輕提示元件，你可根據你的ui庫，對應使用你的一個提示元件。

封裝get方法和post方法

我們常用的ajax請求方法有get、post、put等方法，相信小夥伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文件。但是為了簡化我們的程式碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。 get方法：我們通過定義一個get函式，get函式有兩個引數，第一個參數列示我們要請求的url地址，第二個引數是我們要攜帶的請求引數。get函式返回一個promise物件，當axios其請求成功時resolve伺服器返回值，請求失敗時reject錯誤值。最後通過export丟擲get函式。

/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
export function get(url, params){ 
 return new Promise((resolve, reject) =>{ 
 axios.get(url, {  
  params: params 
 }).then(res => {
  resolve(res.data);
 }).catch(err =>{
  reject(err.data) 
 }) 
});}
複製程式碼

post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從引數物件進行序列化的操作，所以這裡我們通過node的qs模組來序列化我們的引數。這個很重要，如果沒有序列化操作，後臺是拿不到你提交的資料的。這就是文章開頭我們import QS from 'qs';的原因。

/** 
 * post方法，對應post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 */
export function post(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, QS.stringify(params))
 .then(res => {
  resolve(res.data);
 })
 .catch(err =>{
  reject(err.data)
 })
 });
}
複製程式碼

這裡有個小細節說下，axios.get()方法和axios.post()在提交資料時引數的書寫方式還是有區別的。區別就是，get的第二個引數是一個{}，然後這個物件的params屬性值是一個引數物件的。而post的第二個引數就是一個引數物件。兩者略微的區別要留意哦！

api統一管理

上面說了，我們會在api資料夾統一管控請求介面。首先我們在login.js中引入我們封裝的get和post方法。

/** 
 * api介面統一管理
 */
import { get, post } from './http'
複製程式碼

現在，例如我們有這樣一個介面，是一個post請求：

http://www.baidu.com/api/login
複製程式碼

在login.js中這樣封裝

export const login= p => post('api/login', p);
複製程式碼

我們定義了一個login方法，這個方法有一個引數p，p是我們請求介面時攜帶的引數物件。而後呼叫了我們封裝的post方法，post方法的第一個引數是我們的介面地址，第二個引數是login的p引數，即請求介面時攜帶的引數物件。最後通過export匯出login。然後在我們的頁面中可以這樣呼叫我們的api介面：(如果想使用初級版裡面的呼叫方式是一樣的，初級版不過是將非同步轉為同步了)

import { login } from '../../api/login.js';// 匯入我們的api介面
export default {  
 name: 'Address', 
 created () {
  this.onLoad();
 },
 methods: {   
  // 獲取資料   
  onLoad() {
   // 呼叫api介面，並且提供了兩個引數    
   login({     
    username:xxx,
    password:xxx
   }).then(res => {
    // 獲取資料成功後的其他操作
    ………………    
   })   
  }  
 }
}
複製程式碼

其他的api介面，像login.js一樣擴充套件即可。友情提示，為每個介面寫好註釋哦！！！api介面管理的一個好處就是，我們把api統一集中起來，如果後期需要修改介面，我們就直接在api中找到對應的修改就好了，而不用去每一個頁面查詢我們的介面然後再修改會很麻煩。關鍵是，萬一修改的量比較大，就呵呵噠了。還有就是如果直接在我們的業務程式碼修改介面，一不小心還容易動到我們的業務程式碼造成不必要的麻煩。

好了，最後把完成的axios封裝程式碼奉上。

/**axios封裝
 * 請求攔截、相應攔截、錯誤統一處理
 */
import axios from 'axios';
import QS from 'qs';
import { Toast } from 'mint-ui';
import store from '../store/index'
 
// 環境的切換
if (process.env.NODE_ENV === 'development') { 
 axios.defaults.baseURL = 'http://www.dev.com';
} else if (process.env.NODE_ENV === 'test') { 
 axios.defaults.baseURL = 'http://www.test.com';
} else if (process.env.NODE_ENV === 'production') { 
 axios.defaults.baseURL = 'http://www.pro.com';
}
 
// 請求超時時間
axios.defaults.timeout = 10000;
 
// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 請求攔截器
axios.interceptors.request.use( 
 config => {
  // 每次傳送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動新增了
  // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
  const token = store.state.token;  
  token && (config.headers.Authorization = token);  
  return config; 
 }, 
 error => {  
  return Promise.error(error); 
 })
 
// 響應攔截器
axios.interceptors.response.use( 
 response => {  
  if (response.status === 200) {   
   return Promise.resolve(response);  
  } else {   
   return Promise.reject(response);  
  } 
 },
 // 伺服器狀態碼不是200的情況 
 error => {  
  if (error.response.status) {   
   switch (error.response.status) {    
    // 401: 未登入    
    // 未登入則跳轉登入頁面，並攜帶當前頁面的路徑    
    // 在登入成功後返回當前頁面，這一步需要在登入頁操作。    
    case 401:     
     router.replace({      
      path: '/login',      
      query: { redirect: router.currentRoute.fullPath } 
     });
     break;
    // 403 token過期    
    // 登入過期對使用者進行提示    
    // 清除本地token和清空vuex中token物件    
    // 跳轉登入頁面    
    case 403:      
     Toast('登入過期，請重新登入');     
     // 清除token     
     localStorage.removeItem('token');     
     store.commit('loginSuccess', null);     // 不太懂的話可不對狀態碼進行操作
     // 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，登入成功後跳轉需要訪問的頁面
     setTimeout(() => {      
      router.replace({       
       path: '/login',       
       query: { 
        redirect: router.currentRoute.fullPath 
       }      
      });     
     }, 1000);     
     break; 
    // 404請求不存在    
    case 404:     
     Toast('網路請求不存在');     
    break;    
    // 其他錯誤，直接丟擲錯誤提示    
    default:     
     Toast(error.response.data.message);   
   }   
   return Promise.reject(error.response);  
  }  
 }
);
/** 
 * get方法，對應get請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 */
export function get(url, params){ 
 return new Promise((resolve, reject) =>{  
  axios.get(url, {   
   params: params  
  })  
  .then(res => {   
   resolve(res.data);  
  })  
  .catch(err => {   
   reject(err.data)  
  }) 
 });
}
/** 
 * post方法，對應post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的引數] 
 */
export function post(url, params) { 
 return new Promise((resolve, reject) => {   
  axios.post(url, QS.stringify(params))  
  .then(res => {   
   resolve(res.data);  
  })  
  .catch(err => {   
   reject(err.data)  
  }) 
 });
}
複製程式碼

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流。

你的贊是我前進的動力

求贊，求評論，求分享...

vue中Axios的封裝和API介面的管理（更新）
2018-08-07
VueiOS封裝API
vue中axios的使用與封裝
2018-11-12
VueiOS封裝
vue axios封裝以及API統一管理
2019-04-18
VueiOS封裝API
vue中axios請求的封裝
2019-03-21
VueiOS封裝
axios封裝api
2018-08-10
iOS封裝API
vue中對axios進行封裝
2018-12-25
VueiOS封裝
Vue Axios 的封裝使用
2020-08-20
VueiOS封裝
vue中使用axios的封裝
2021-09-09
VueiOS封裝
vue - axios網路封裝模組
2020-11-09
VueiOS封裝
基於Windows API的命名管道的封裝與使用詳解
2019-01-16
WindowsAPI封裝
Vue3——axios 安裝和封裝
2024-03-13
VueiOS封裝
vue-cli 3.0 + 對 axios 封裝
2019-07-25
VueiOS封裝
Vue-axios 封裝了一手好axios：）
2021-08-14
VueiOS封裝
Vue 封裝axios(四種請求)及相關介紹(十三)
2020-06-29
Vue封裝iOS
vue-cli中怎麼基於axios去封裝方法
2019-03-24
VueiOS封裝
vue中axios非同步呼叫介面的坑
2020-12-11
VueiOS非同步
axios封裝
2020-10-14
iOS封裝
封裝axios
2020-09-29
封裝iOS
Api 介面的統一響應封裝
2022-05-24
API封裝
vue-axios的總結及專案中的常見封裝方法。
2021-05-09
VueiOS封裝
axios 二次封裝 api的統籌管理配合async await實際專案中的運用
2018-10-15
iOS封裝APIAI
vue全家桶 ---axios的使用和二次封裝
2018-12-29
VueiOS封裝
Vue — 請求模組、api模組封裝
2024-03-14
VueAPI封裝
在 vue-cli 3.0 + 裡面對 axios 封裝
2019-06-28
VueiOS封裝
vue介面請求方式axios二次封裝
2018-12-17
VueiOS封裝
Vue功能篇 - 3.封裝axios請求庫
2020-11-18
Vue封裝iOS
Vue二次封裝axios為外掛使用
2018-04-28
Vue封裝iOS
在 vue-cil 裡封裝一個簡單的 axios
2019-04-25
Vue封裝iOS
react中請求介面的封裝
2021-09-09
React封裝
封裝axios請求
2018-12-15
封裝iOS
全屏API及vue3 hook封裝
2023-11-23
APIVueHook封裝
axios的二次封裝
2020-12-24
iOS封裝
c# 中的封裝、繼承、多型詳解
2017-07-30
C#封裝繼承多型
vue3.0API詳解
2021-05-20
VueAPI
axios二次封裝
2019-02-16
iOS封裝
封裝ajax、axios請求
2019-01-23
封裝iOS
axios的二次封裝與async,await的配合使用?
2018-11-25
iOS封裝AI
vue.js axios call api example
2021-06-27
Vue.jsiOSAPI