1.安裝axios
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
在編譯器的的終端控制臺(tái)上輸入
npm install axios --save
或
cnpm install axios --save
或者通過(guò)CDN直接在文件中引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.使用axios請(qǐng)求數(shù)據(jù)
在腳手架項(xiàng)目中的main.js中頭部引入axios
import axios from 'axios'
并將其注冊(cè)為全局變量
Vue.prototype.$axios = axios
在需要使用的場(chǎng)合通過(guò)GET和POST方式請(qǐng)求數(shù)據(jù)
this.$axios.get('url')
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
})
this.$axios.post('url')
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
})
3.跨域請(qǐng)求
如果請(qǐng)求的數(shù)據(jù)來(lái)自其他服務(wù)器眼坏，需要跨域請(qǐng)求列赎，需要聲明代理來(lái)解決問(wèn)題
vue腳手架3.0版本取消了config文件夾读宙，需要自己在工程根目錄新建vue.config.js來(lái)進(jìn)行配置
vue.config.js在編譯時(shí)會(huì)被腳手架自動(dòng)加載
如果是element-ui項(xiàng)目鲜侥，在webpack.config.js文件中的devServer模塊中添加驾荣，方式與下面的操作一致
聲明vue.config.js
在其中配置根節(jié)點(diǎn)
module.exports = {
}
在根節(jié)點(diǎn)中追加代理設(shè)置
devServer: {
proxy: {
'abc': {
target: 'url', //第一個(gè)跨域網(wǎng)站根路徑
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/abc": "/" // 這里理解成用‘/abc’代替target里面的地址，后面組件中我們掉接口時(shí)直接用abc代替
}
},
'xyz'{
target: 'url', //第二個(gè)跨域網(wǎng)站根路徑
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/abc": "/" // 這里理解成用‘/abc’代替target里面的地址瘸爽，后面組件中我們掉接口時(shí)直接用abc代替
}
}
}
}
