這篇文章主要給大家分享介紹了關於動態Axios的配置步驟，文中透過範例程式碼介紹的非常詳細，透過這個教學大家可以很方便的實現動態Axios的配置，需要的朋友可以參考借鑒，
前言
以前寫Vue專案的時候都是使用vue-resource做為專案ajax函式庫，在11月份的某一天尤大微博的更新表示ajax的函式庫應該是通用的，放棄了對vue-resource的技術支持，推薦使用axios。
推薦使用Vue-cli工具來建立和管理項目，就算剛開始不熟悉，用著便可知曉其中的奧妙。前陣子官方所推薦的資料請求外掛還是Vue-resource，但現在已經變了，變成了Axios,不用知道為什麼變了，反正這個用起來比那個好一些，用就是了，下面是一些封裝axios請求的一些經驗，不對之處，還望多多指教！
方法如下
一、建立文件，Vue專案初始化之後，在src目錄下再建立一個util工具資料夾，一般就是用來存放一些封裝的函數方法，現在讓我們在util檔案目錄下建立一個http.js文件，封裝axios方法。
二、直接上程式碼（常規版），程式碼中有詳細的註解
import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口
// http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
config => {
const token = sessionStorage.getItem("token"); //获取存储在本地的token
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
};
if (token) {
config.headers.Authorization = "Token " + token; //携带权限参数
}
return config;
},
err => {
return Promise.reject(err);
}
);
// http response 拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的
if(response.status == 401) {
router.push({ //push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数
path: '/login'
})
}
return response;
},
error => {
return Promise.reject(error.response.data)
});
export default axios;
/**
* fetch 请求方法
* @param url
* @param params
* @returns {Promise}
*/
export function fetch(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* post 请求方法
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
})
}
/**
* patch 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
})
}
/**
* put 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
})
}三、（動態版），axios的攔截器不是必要的，不是每個專案都需要，而且headers裡面的Content-Type和Authorization不只一種，這時就需要使用另一種方法。
util/http.js
import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。
//^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置
/**
* fetch 请求方法
* @param url
* @param params
* @returns {Promise}
*/
export function fetch(url, params = {}, headers = {
'Content-Type': 'application/json', //设置跨域头部
"Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
headers: headers
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err.response)
})
})
}
/**
* post 请求方法
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}, config = {
"headers": {
'Content-Type': 'application/json', //设置跨域头部
"Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}
}) {
return new Promise((resolve, reject) => {
axios.post(url, data, config)
.then(response => {
resolve(response.data);
}, err => {
reject(err.response);
})
})
}
/**
* patch 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}, config = {
"headers": {
'Content-Type': 'application/json', //设置跨域头部
"Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}
}) {
return new Promise((resolve, reject) => {
axios.patch(url, data, config)
.then(response => {
resolve(response.data);
}, err => {
reject(err.response);
})
})
}
/**
* put 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}, config = {
"headers": {
'Content-Type': 'application/json', //设置跨域头部
"Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}
}) {
return new Promise((resolve, reject) => {
axios.put(url, data, config)
.then(response => {
resolve(response.data);
}, err => {
reject(err.response);
})
})
}App.vue(這是在src目錄下的程式入口檔案)
<template>
<p id="app">
<router-view/>
</p>
</template>
<script>
import axios from 'axios';
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
//若本地项目调试使用
axios.defaults.baseURL = 'http://10.0.xx.xxx:xxxx/api/';
} else {
//动态请求地址
axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
name: 'app',
axios //这里记得导出，若请求地址永久固定一个，则就按照`普通版`配置一个baserURL就可以了
}
</script>
<style lang="scss"> //这里我使用的是scss
@import '~@/style/style'
</style>總結
#常見問題
在使用動態版時，為什麼稱為動態呢，是因為存取位址和請求位址是同一個位址可連接埠號，例如我透過http://www.cmgos.com(預設埠80)存取項目，那麼我的baseURL會自動的變成http:www.cmgos.com:80/api/，這麼做的原因是當某一天專案遷移或http改為https時，不用再去更改請求位址，程式自動就完成了
資料請求位址配置不正確？如果你配置了baseURL，那麼你封裝的函數在使用時僅需傳入基於baseURL的請求位址，例如傳入login/那麼請求位址就會自動變成http:www.cmgos.com:80/api/login/ ，若未配置，那麼可以直接傳入整個請求位址
注意事項
在使用動態版時，由於沒有使用攔截器，所以下面封裝的函數在回傳錯誤的時候需要寫成err.response.data來取得傳回的數據，但我寫的是err.response，因為這樣可以拿到(status)狀態碼等訊息，若不需要判斷回傳的狀態碼，則改為err.response.data便可
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
pace.js和NProgress.js如何使用載入進度外掛程式（詳細教學）
在jQuery中有關NProgress.js載入進度外掛程式使用方法
##在微信小程式中如何使用switch元件以上是有關Axios的設定步驟（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
