溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
目前主流的 Vue 項目，都選擇 axios 來完成 ajax 請求，而大型項目都會使用 Vuex 來管理數據。
前言：
使用 cnpm 安裝 axios
cnpm install axios -S
安裝其他插件的時候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每個需要發送請求的組件中即時
引入
為了解決這個問題，是在引入 axios 之后，修改原型鏈具體的實施請往下看~
改寫原型鏈
首先在 main.js 中引入 axios
import axios from 'axios'
這時候如果在其它的組件中，是無法使用 axios 命令的。但如果將 axios 改寫為 Vue 的原型屬性，就能解決這個問題
Vue.prototype.$ajax = axios
在 main.js 中添加了這兩行代碼之后，就能直接在組件的 methods 中使用 $ajax 命令
methods: {
but_ajax() {
this.$ajax({
method: 'post',
url: 'http://192.168.0.113:8080/llhb/m/requirement/allCategor',
params: { //需要發送的數據
name: 'zhangwenwu2',
age: '15'
}
})
//請求成功后執行then 如果直接在里面訪問 this，無法訪問到 Vue 實例，this指向發生了變化。建議使用箭頭函數,下面有講
.then(function (response) {
console.log(response); //處理后臺返回的數據
})
//請求失敗后執行catch
.catch(function(err){
console.log(err)
})
}
附錄：配置 axios
上面封裝的方法中，使用了 axios 的三個配置項，實際上只有 url 是必須的，完整的 api 可以參考使用說明
為了方便，axios 還為每種方法起了別名，比如上面的 saveForm 方法等價于：
axios.post('/user', context.state.test02)
完整的請求還應當包括 .then 和 .catch
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
當請求成功時，會執行 .then，否則執行 .catch
這兩個回調函數都有各自獨立的作用域，如果直接在里面訪問 this，無法訪問到 Vue 實例，this指向發生了變化。
這時只要添加一個 .bind(this) 就能解決這個問題,或者使用箭頭函數即可
.then(function(res){
console.log(this.data)
}.bind(this))
.then((res) => {
console.log(this.data)
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
