復雜封裝，包含提示和狀態碼的，點擊這里查看

以下是簡單封裝axios的request.js文件：

import axios from 'axios' import router from './../router' import { Message } from 'element-ui'// 設置axios全局默認的BASE-URL， 只要設置了全局的默認base_url，以后的請求會自動拼接上base_url // -------------------------------注意改成自己的公共url------------------------------------ axios.defaults.baseURL = 'http://192.168.1.194/gateway' axios.defaults.timeout = 10000// 配置axios的請求攔截器-(每次在請求頭上攜帶后臺分配的token-后臺判斷token是否有效等問題) axios.interceptors.request.use(config => {// 在發送請求之前做些什么// console.log('請求到了喲', config.headers.Authorization)// 如果有其他的特殊配置 只需要判斷config參數 設置即可// 標識系統為AJAX請求config.headers['X-Requested-With'] = 'XMLHttpRequest'// 統一的給config設置 token-------------------------------注意獲取方法------------------------------------// config.headers.Authorization = JSON.parse(localStorage.getItem('token'))config.headers['Token'] = '3d2eec53c6f74f43a85e8df083d9bf84'return config }, error => {// 對請求錯誤做些什么return Promise.reject(error) } )// 響應攔截器 與后端定義狀態是100時候是錯誤 跳轉到登錄界面 axios.interceptors.response.use(response => {// 對響應數據做點什么console.log('接口success', response)// 當返回信息為未登錄或者登錄失效的時候重定向為登錄頁面if (response.data.status == 100 ||response.data.message == '用戶未登錄或登錄超時，請登錄！') {localStorage.removeItem('token')router.push({path: '/login',querry: { } // 從哪個頁面跳轉})Message.warning(response.data.message)}return response.data }, error => {console.log('接口error', error)// 對響應錯誤做點什么return Promise.reject(error) } )const $http = {}$http.get = function(url, data, config) {// 這一步把api方法里的 地址 參數 配置傳入進來 配置到config 然后調用上面封裝的axiosconfig = config || {}config.url = urlconfig.method = 'get'config.params = datareturn axios.request(config) }$http.delete = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'delete'config.params = datareturn axios.request(config) }$http.post = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'post'config.data = datareturn axios.request(config) }$http.put = function(url, data, config) {config = config || {}config.url = urlconfig.method = 'put'config.data = datareturn axios.request(config) }export { axios, $http }

總結

以上是生活随笔為你收集整理的简单的封装axios 不包含状态码和提示的全部內容，希望文章能夠幫你解決所遇到的問題。

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