接觸vue已經很長時間，也經常使用axios，但是原生封裝的方法都很難滿足日程開發的需求，所以這期就寫一下axios的封裝。

作者：陳寶玉啊

轉發鏈接：https://www.jianshu.com/p/a5c8ce9542e6

底部有完整代碼

1.前期準備

創建一個js文件，命名自定。我這里定義為request.js

import axios from 'axios' //導入原生的axios import qs from 'qs'; //導入qs,做字符串的序列化，為了后面不同的場景使用。import { MessageBox, Message} from 'element-ui' //引入element-ui的兩個組件，分別是消息框和消息提示 import store from '@/store' //引入狀態管理倉庫import router from '@/router' //引入路由import { getToken} from '@/utils/auth' //根據業務需求，這個方法是用來獲取Token

2.創建實例

// 創建一個axios實例const service = axios.create({ baseURL: 'XXXXXX', // url = base url + request url withCredentials: true, // 當跨域請求時發送cookie timeout: 15000 // 請求時間})

3.請求攔截器

在發送請求之前做些什么

service.interceptors.request.use( config => { if (store.getters.token) { // 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰。 // 請根據實際情況修改。 config.headers['Has-Token'] = getToken() } //在這里根據自己相關的需求做不同請求頭的切換，我司是需要使用這兩種請求頭。 if (config.json) { config.headers['Content-Type'] = 'application/json' } else { config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' config.data = qs.stringify(config.data); //利用qs做json序列化 } return config }, error => { // 處理請求錯誤 console.log(error) // 調試 return Promise.reject(error) })

4.響應攔截器

在收到相應后做些什么

service.interceptors.response.use( response => { const res = response.data //這是響應返回后的結果 //在這里可以根據返回的狀態碼對存在響應錯誤的請求做攔截，提前做處理。 //以下為我司的處理規則 // 如果自定義代碼不是200，則判斷為錯誤。 if (res.code == 200 || res.code == 300) { // 重新登陸 MessageBox.confirm('您的登錄狀態存在問題，您可以取消以停留在此頁面，或再次登錄', '系統提示', { confirmButtonText: '重新登錄', type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload(); }) }) return } else { if (res.code == 700) { Message.warning('您沒有獲取請求的權限！') router.replace({ path: '/401' }) return } else { return res } } //end }, error => { console.log('err' + error) Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) })

5.拋出實例

export default service

6.如何調用

//以我司請求為例子import request from '@/utils/request'export function getCity(data) { return request({ url: '/getCity/findParentId', method: 'post', data })}

7.完整代碼

import axios from 'axios'import qs from 'qs';import { MessageBox, Message} from 'element-ui'import store from '@/store'import router from '@/router'import { getToken} from '@/utils/auth'// 創建一個axios實例const service = axios.create({ baseURL: 'XXXXX', withCredentials: true, timeout: 15000 })service.interceptors.request.use( config => { if (store.getters.token) { // 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰。 // 請根據實際情況修改。 config.headers['Has-Token'] = getToken() } //在這里根據自己相關的需求做不同請求頭的切換，我司是需要使用這兩種請求頭。 if (config.json) { config.headers['Content-Type'] = 'application/json' } else { config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' config.data = qs.stringify(config.data); //利用qs做json序列化 } return config }, error => { // 處理請求錯誤 console.log(error) // 調試 return Promise.reject(error) })service.interceptors.response.use( response => { const res = response.data //這是響應返回后的結果 //在這里可以根據返回的狀態碼對存在響應錯誤的請求做攔截，提前做處理。 //以下為我司的處理規則 // 如果自定義代碼不是200，則判斷為錯誤。 if (res.code == 200 || res.code == 300) { // 重新登陸 MessageBox.confirm('您的登錄狀態存在問題，您可以取消以停留在此頁面，或再次登錄', '系統提示', { confirmButtonText: '重新登錄', type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload(); }) }) return } else { if (res.code == 700) { Message.warning('您沒有獲取請求的權限！') router.replace({ path: '/401' }) return } else { return res } } //end }, error => { console.log('err' + error) Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) })export default service

作者：陳寶玉啊
轉發鏈接：https://www.jianshu.com/p/a5c8ce9542e6

總結

以上是生活随笔為你收集整理的axios封装_VUE.JS请求工具Axios的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。