Axios 是一個(gè)基于 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默認(rèn)值（可選）
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請(qǐng)求
this.$axios.get("請(qǐng)求url",{param:{}})
? ? ? ? ? .then(function(response){
? ? ? ? ? ? ? ? ? console.info(response.data);
? ? ? ? ? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? ? ? ? console.info(error);
? ? ? ? ? ? ? ? });
四征候、使用post方式的http請(qǐng)求
this.$axios.post("請(qǐng)求路徑",{})
? ? ? ? ? .then(function(response){
? ? ? ? ? ? ? ? ? console.info(response.data);
? ? ? ? ? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? ? ? ? console.info(error);
? ? ? ? ? ? ? ? });
注意：使用上述post方式提交參數(shù)的時(shí)候存在問題杭攻，axios中post的請(qǐng)求參數(shù)格式是form-data格式。而上述json串的格式為x-www-form-urlencoded格式
例如：
form-data:?name="zhangsan"&age=10?
x-www-form-urlencoded:{name:"zhangsan",age:10}
此時(shí)我們需要將數(shù)據(jù)格式作轉(zhuǎn)換疤坝，在當(dāng)前頁面引入第三方庫qs
import qs from "qs"
此時(shí)上述參數(shù)改為：
this.$axios.post("請(qǐng)求路徑",qs.stringify({}))
? ? ? ? ? .then(function(response){
? ? ? ? ? ? ? ? ? console.info(response.data);
? ? ? ? ? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? ? ? ? console.info(error);
? ? ? ? ? ? ? ? });
五兆解、Axios的攔截器
? 攔截器在main.js中進(jìn)行配置，配置如下：
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
? ? // 在發(fā)送請(qǐng)求之前做些什么
? ? return config;
? }, function (error) {
? ? // 對(duì)請(qǐng)求錯(cuò)誤做些什么
? ? return Promise.reject(error);
? });
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
? ? // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
? ? return response;
? }, function (error) {
? ? // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
? ? return Promise.reject(error);
? });
基于以上的攔截器跑揉，我們可以對(duì)請(qǐng)求的數(shù)據(jù)或者是響應(yīng)的數(shù)據(jù)做些處理锅睛，就拿上面post方式的請(qǐng)求參數(shù)格式舉個(gè)例子，通過攔截器我們可以對(duì)所有的post方式的請(qǐng)求參數(shù)在發(fā)出請(qǐng)求之前作出轉(zhuǎn)換：
import qs from "qs"
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
? ? // 參數(shù)格式轉(zhuǎn)換
? ? if(config.method=="post"){
? ? ? ? config.data = qs.stringify(config.data);
? ? }
? ? return config;
? }, function (error) {
? ? // 對(duì)請(qǐng)求錯(cuò)誤做些什么
? ? return Promise.reject(error);
? });
? 因此基于攔截器我們?cè)趐ost請(qǐng)求的時(shí)候可以直接使用from-data的格式历谍，不需要每次都編碼轉(zhuǎn)換
?六现拒、前端跨域解決方案（了解）
描述：由于使用vue腳手架的目的就是使前后端分離，前端請(qǐng)求后端的數(shù)據(jù)在測(cè)試階段設(shè)計(jì)到跨域請(qǐng)求問題望侈，在前端中我們可以通過如下配置解決跨域請(qǐng)求問題印蔬。
? 第一步（在config文件夾下的index.js中進(jìn)行如下修改）
proxyTable:{
? ? "/api":{
? ? ? ? target:"后端提供服務(wù)的前綴地址",
? ? ? ? changeOrigin:true,
? ? ? ? pathRewrite:{
? ? ? ? ? ? ? '^/api':''
? ? ? ? }
? ? }
},
? 第二步（在main.js中添加一個(gè)代理）
Vue.prototype.HOST='/api'
?再進(jìn)行請(qǐng)求的時(shí)候只需要使用url = this.HOST+"請(qǐng)求的Mappering地址"即可。
（注意：在上述過程中修改了config下的配置文件脱衙，服務(wù)需要重新啟動(dòng)侥猬，才能生效）
例如：
1：打開config/index.js
module.exports{
????dev: {
????}
}
在這里面找到proxyTable{}，改為這樣：
proxyTable: {
??????'/api': {
????????target:?'http://121.41.130.58:9090',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
????????changeOrigin:?true,
????????pathRewrite: {
??????????'^/api':?''//這里理解成用‘/api’代替target里面的地址捐韩，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'退唠，直接寫‘/api/user/add’即可
????????}
??????}
????}
2：在需要調(diào)接口的組件中這樣使用：
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
頁面調(diào)用：http://localhost:8081/api/yt_api/login/doLogin ——這里多了一個(gè)/api/不是多余的，不要?jiǎng)h
七?axios傳參
1：Vue官方推薦組件axios默認(rèn)就是提交 JSON 字符串荤胁，所以我們要以json字符串直接拼接在url后面的形式瞧预，直接將json對(duì)象傳進(jìn)去就行了
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這個(gè)json對(duì)象傳入到post方法中，頁面中的形式為：
2：以key：val的形式傳參
let?postData = qs.stringify({
????companyCode:'tur',
????userName:'123456789123456789',
????password:'123456'
})
我們需要對(duì)這個(gè)json對(duì)象操作，這里的qs你需要先安裝
1npm install qs
再導(dǎo)入
1import qs?from?'qs'
面中的形式為：
