1. 程式人生 > >vue使用axios非同步請求後端資料的使用

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.jsimport Vue from 'Vue'import Vuex from 'vuex'// 引入 axiosimport 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 defaultstore

注意:即使已經在 main.js 中引入了 axios,並改寫了原型鏈,也無法在 store.js 中直接使用 $ajax 命令

換言之,這兩種方案是相互獨立的

在元件中傳送請求的時候,需要使用 this.$store.dispatch 來分發

?
12345methods: {submitForm () {this.$store.dispatch('saveForm')}}

submitForm 是繫結在元件上的一個方法,將觸發 saveForm,從而通過 axios 向伺服器傳送請求

附:配置 axios

上面封裝的方法中,使用了 axios 的三個配置項,實際上只有 url 是必須的。

為了方便,axios 還為每種方法起了別名,比如上面的 saveForm 方法等價於:

?
1axios.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



相關推薦

no