Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。Axios的中文文檔以及github地址如下：
中文：https://www.kancloud.cn/yunye/axios/234845github:https://github.com/axios/axios
vue路由文檔：https://router.vuejs.org/zh/
一、安裝Axios插件
npm install axios --save
二、在main.js中引入Axios庫
import Axios from "axios"
//將axios掛載到原型上
Vue.prototype.$axios = Axios;
//配置全局的axios默認值（可選）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
三、使用get方式的http請求
this.$axios.get("請求url",{param:{}})
? ? ? ? ? .then(function(response){
? ? ? ? ? ? ? ? ? console.info(response.data);
? ? ? ? ? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? ? ? ? console.info(error);
? ? ? ? ? ? ? ? });
四、使用post方式的http請求
this.$axios.post("請求路徑",{})
? ? ? ? ? .then(function(response){
? ? ? ? ? ? ? ? ? console.info(response.data);
? ? ? ? ? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? ? ? ? console.info(error);
? ? ? ? ? ? ? ? });
注意：使用上述post方式提交參數的時候存在問題，axios中post的請求參數格式是form-data格式。而上述json串的格式為x-www-form-urlencoded格式
例如：
form-data:?name="zhangsan"&age=10?
x-www-form-urlencoded:{name:"zhangsan",age:10}
此時我們需要將數據格式作轉換，在當前頁面引入第三方庫qs
import qs from "qs"
此時上述參數改為：
this.$axios.post("請求路徑",qs.stringify({}))
? ? ? ? ? .then(function(response){
? ? ? ? ? ? ? ? ? console.info(response.data);
? ? ? ? ? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? ? ? ? console.info(error);
? ? ? ? ? ? ? ? });
五、Axios的攔截器
? 攔截器在main.js中進行配置，配置如下：
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
? ? // 在發(fā)送請求之前做些什么
? ? return config;
? }, function (error) {
? ? // 對請求錯誤做些什么
? ? return Promise.reject(error);
? });
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
? ? // 對響應數據做點什么
? ? return response;
? }, function (error) {
? ? // 對響應錯誤做點什么
? ? return Promise.reject(error);
? });
基于以上的攔截器，我們可以對請求的數據或者是響應的數據做些處理，就拿上面post方式的請求參數格式舉個例子，通過攔截器我們可以對所有的post方式的請求參數在發(fā)出請求之前作出轉換：
import qs from "qs"
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
? ? // 參數格式轉換
? ? if(config.method=="post"){
? ? ? ? config.data = qs.stringify(config.data);
? ? }
? ? return config;
? }, function (error) {
? ? // 對請求錯誤做些什么
? ? return Promise.reject(error);
? });
? 因此基于攔截器我們在post請求的時候可以直接使用from-data的格式，不需要每次都編碼轉換
?六、前端跨域解決方案（了解）
描述：由于使用vue腳手架的目的就是使前后端分離，前端請求后端的數據在測試階段設計到跨域請求問題，在前端中我們可以通過如下配置解決跨域請求問題。
? 第一步（在config文件夾下的index.js中進行如下修改）
proxyTable:{
? ? "/api":{
? ? ? ? target:"后端提供服務的前綴地址",
? ? ? ? changeOrigin:true,
? ? ? ? pathRewrite:{
? ? ? ? ? ? ? '^/api':''
? ? ? ? }
? ? }
},
? 第二步（在main.js中添加一個代理）
Vue.prototype.HOST='/api'
?再進行請求的時候只需要使用url = this.HOST+"請求的Mappering地址"即可。
（注意：在上述過程中修改了config下的配置文件，服務需要重新啟動，才能生效）
例如：
1：打開config/index.js
module.exports{
????dev: {
????}
}
在這里面找到proxyTable{}，改為這樣：
proxyTable: {
??????'/api': {
????????target:?'http://121.41.130.58:9090',//設置你調用的接口域名和端口號 別忘了加http
????????changeOrigin:?true,
????????pathRewrite: {
??????????'^/api':?''//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可
????????}
??????}
????}
2：在需要調接口的組件中這樣使用：
axios.post('/api/yt_api/login/doLogin',postData)
????.then(function (response) {
????????console.log(1)
????????console.log(response);
????})
????.catch(function (error) {
????????console.log(error);
????})
注意：原接口：http://http://121.41.130.58:9090/yt_api/login/doLogin
頁面調用：http://localhost:8081/api/yt_api/login/doLogin ——這里多了一個/api/不是多余的，不要刪
七?axios傳參
1：Vue官方推薦組件axios默認就是提交 JSON 字符串，所以我們要以json字符串直接拼接在url后面的形式，直接將json對象傳進去就行了
let postData = {
companyCode:'tur',
userName:'123456789123456789',
password:'123456'
}
axios.get('/api/yt_api/login/doLogin',{
params: {
...postData,
}
})
.then(function (response) {
console.log(1)
console.log(response);
})
.catch(function (error) {
console.log(error);
});
這里我們將postData這個json對象傳入到post方法中，頁面中的形式為：
2：以key：val的形式傳參
let?postData = qs.stringify({
????companyCode:'tur',
????userName:'123456789123456789',
????password:'123456'
})
我們需要對這個json對象操作，這里的qs你需要先安裝
1npm install qs
再導入
1import qs?from?'qs'
面中的形式為：
