vue使用axios非同步請求後端資料的使用
Vue 原本有一個官方推薦的 ajax 外掛 vue-resource,但是自從 Vue 更新到 2.0 之後,官方就不再更新維護 vue-resource,並推薦axios,
目前主流的 Vue 專案,都選擇 axios 來完成 ajax 請求。
使用方法:
方案一:改原型
1.安裝
npm install axios --save-dev
2.使用:
main.js中:
import axios from
"axios"
Vue.prototype.$ajax=axios
將 axios 改寫為 Vue 的原型屬性,這樣其它的元件中,方可以使用 axios 命令的,(或者在要引用的元件頁直接 import axios from
"axios"
)3.方法中可以使用:
this.$ajax({
method:'get',
url:url,
data:data
}).then(function (res) {
console.log(res)
}).catch(function (err) {
console.log(err)
})
本地測試發現,url介面路徑地址,用絕對路徑更好點。相對地址有時候抓取報錯。原因未知。
關於get,post方法:繞坑參考:http://blog.csdn.net/milli236/article/details/78053711
方案二:在 Vuex 中封裝
之前的文章中用到過 Vuex 的 mutations,從結果上看,mutations 類似於事件,用於提交 Vuex 中的狀態 state
action 和 mutations 也很類似,主要的區別在於,action 可以包含非同步操作,而且可以通過 action 來提交 mutations
另外還有一個重要的區別:
mutations 有一個固有引數 state,接收的是 Vuex 中的 state 物件
action 也有一個固有引數 context,但是 context 是 state 的父級,包含 state、getters
Vuex 的倉庫是 store.js,將 axios 引入,並在 action 新增新的方法
1234567891011121314151617181920212223242526272829303132 | // store.js import Vue from 'Vue' import Vuex from 'vuex' // 引入 axios import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ // 定義狀態 state: { test01: { name: 'Wise Wrong' }, test02: { tell: '12312345678' } }, actions: { // 封裝一個 ajax 方法 saveForm (context) { axios({ method: 'post' , url: '/user' , data: context.state.test02 }) } } }) export default store |
注意:即使已經在 main.js 中引入了 axios,並改寫了原型鏈,也無法在 store.js 中直接使用 $ajax 命令
換言之,這兩種方案是相互獨立的
在元件中傳送請求的時候,需要使用 this.$store.dispatch 來分發
?12345 | methods: { submitForm () { this .$store.dispatch( 'saveForm' ) } } |
submitForm 是繫結在元件上的一個方法,將觸發 saveForm,從而通過 axios 向伺服器傳送請求
附:配置 axios
上面封裝的方法中,使用了 axios 的三個配置項,實際上只有 url 是必須的。
為了方便,axios 還為每種方法起了別名,比如上面的 saveForm 方法等價於:
?1 | axios.post('/user', context.state.test02) |
完整的請求還應當包括 .then 和 .catch
?123456 | .then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) }) |
當請求成功時,會執行 .then,否則執行 .catch
原文連結:http://www.cnblogs.com/wisewrong/p/6402183.html