在vue項目中對axios進行封裝

1、引入axios，qs模塊

import axios from 'axios'; import Qs from "qs"; import store from "./store";

2、配置環境

if (process.env.NODE_ENV == 'development') { //開發環境 axios.defaults.baseURL = "/v1"; } else if (process.env.NODE_ENV == 'debug') { //測試環境 axios.defaults.baseURL = "/visual"; } else if (process.env.NODE_ENV == 'production') { //生產環境 axios.defaults.baseURL = 'https://www.production.com'; }

3、設置請求超時時間為10s

axios.defaults.timeout = 1000 * 10;

4、post請求頭的設置

axios.defaults.headers['Content-Type'] = "application/json;charset=UTF-8";

5、請求攔截

axios.interceptors.request.use(config => {if (!(config.url.includes('login'))) {config.headers = {'token': sessionStorage.token,// "x-ajax": true,// "content-type":'application/json',}}return config;},error => {return Promise.reject(error);} )

6、請求響應

axios.interceptors.response.use(response => {return response},error => { //失敗判斷if (error.response) {switch (error.response.status) {case 401:if (!error.response.config.url.includes('login')) {sessionStorage.token = null;location.reload()}}}return Promise.reject(error.response.data)} )export default axios

總結

以上是生活随笔為你收集整理的在vue项目中对axios进行封装的全部內容，希望文章能夠幫你解決所遇到的問題。

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