使用 cnpm 安裝 axios
cnpm install axios --save
安裝其他插件的時(shí)候荤傲，可以直接在 main.js 中引入并 Vue.use()描姚，但是 axios 并不能 use，只能每個(gè)需要發(fā)送請(qǐng)求的組件中即時(shí)引入
為了解決這個(gè)問題块攒，有兩種開發(fā)思路哮塞，一是在引入 axios 之后，修改原型鏈算凿，二是結(jié)合 Vuex份蝴，封裝一個(gè) aciton。這里只說修改原型鏈的方式
改寫原型鏈
首先在 main.js 中引入 axios
import axios from 'axios'
這時(shí)候如果在其它的組件中氓轰，是無法使用 axios 命令的婚夫。所以我們將 axios 改寫為 Vue 的原型屬性
Vue.prototype.$http= axios
在 main.js 中添加了這兩行代碼之后，就能直接在組件的 methods 中使用 $http命令
例如
methods: {
show() {
this.$http({
method: 'get',
url: '/user',
data: {
name: 'virus'
}
})
}
配置 axios
實(shí)際上只有 url 是必須的署鸡，完整的 api 可以參考https://www.kancloud.cn/yunye/axios/234845
- 對(duì)于get請(qǐng)求
axios.get('/user', {
params:{
name:"virus"
}
})
- 對(duì)于post請(qǐng)求
axios.post('/user',{
name:"virus"
})
3案糙、 一次性并發(fā)多個(gè)請(qǐng)求
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//當(dāng)這兩個(gè)請(qǐng)求都完成的時(shí)候會(huì)觸發(fā)這個(gè)函數(shù)，兩個(gè)參數(shù)分別代表返回的結(jié)果
}))
4.axios可以通過配置（config）來發(fā)送請(qǐng)求
//發(fā)送一個(gè)`POST`請(qǐng)求
axios({
method:"POST",
url:'/user/1111',
data:{
name:"virus"
}
});
完整的請(qǐng)求還應(yīng)當(dāng)包括 .then 和 .catch
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
當(dāng)請(qǐng)求成功時(shí)靴庆，會(huì)執(zhí)行 .then侍筛，否則執(zhí)行 .catch
這兩個(gè)回調(diào)函數(shù)都有各自獨(dú)立的作用域，如果直接在里面訪問 this撒穷，無法訪問到 Vue 實(shí)例,這時(shí)只要添加一個(gè) .bind(this) 就能解決這個(gè)問題匣椰。(如果你使用的是es6箭頭函數(shù)就不存在這樣的問題)
.then(function(res){
console.log(this.data)
}.bind(this))
請(qǐng)求方式的別名，這里對(duì)所有已經(jīng)支持的請(qǐng)求方式都提供了方便的別名
axios.request(config);
axios.get(url[,config]);
axios.delete(url[,config]);
axios.head(url[,config]);
axios.post(url[,data[,config]]);
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
有時(shí)候我們?cè)谡?qǐng)求前需要對(duì)參數(shù)進(jìn)行序列化
比如 Form Data
function json2query(o) {
let ret = [];
for (let k in o) {
ret.push(k + '=' + o[k]);
}
return ret.join('&');
}
axios({
method: 'post',
url: `xxx`,
data: {
file:'abc.xmind',
title:'xmind'
},
transformRequest: [(data) =>{ //在請(qǐng)求之前對(duì)data傳參進(jìn)行格式轉(zhuǎn)換
data = json2query(data)
return data
}],
headers:{
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
在做開發(fā)的時(shí)候我們可能會(huì)遇到本地模擬數(shù)據(jù)的情況端礼，這時(shí)候我們就要模擬本地?cái)?shù)據(jù)了禽笑，下面就是vue開發(fā)請(qǐng)求本地模擬數(shù)據(jù)的配置方法
//對(duì)于新版本的webpack
//修改webpack.dev.conf.js
//首先
const express = require('express')
const app = express()
var data = require('../data.json')//加載本地?cái)?shù)據(jù)文件
var apiRoutes = express.Router()
app.use('/api', apiRoutes）
//然后在devServer配置選項(xiàng)里面添加下面的代碼
before(app){
app.get("/api/seller",(req,res)=>{
res.json({
data:data.seller
})
})
}
另外，補(bǔ)充
vue cli腳手架前端調(diào)后端數(shù)據(jù)接口時(shí)候的本地代理跨域問題蛤奥，如我在本地localhost訪問接口http://425.00.100.100:888/是要跨域的佳镜，瀏覽器的安全策略，會(huì)報(bào)錯(cuò)凡桥，在webpack配置一下proxyTable就OK了蟀伸，如下 config/index.js
dev: {
加入以下
proxyTable: {
'/api': {
target: 'http://425.0.100.100:8888/',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
changeOrigin: true,//如果需要跨域
pathRewrite: {
'^/api': '/'
//這里理解成用面的地址，
后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)
用'http://425.0.100.100:8888/user/add'缅刽，直接寫‘/api/user/add’即可
}
}
},
然而在復(fù)雜的項(xiàng)目中一般會(huì)對(duì)axios做二次封裝啊掏，添加攔截器，稍后會(huì)更新二次封裝
