vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼

發(fā)布時(shí)間：2020-09-01 13:19:22 來源：腳本之家閱讀：141 作者：zhangwenwu2 欄目：web開發(fā)

目前主流的 Vue 項(xiàng)目，都選擇 axios 來完成 ajax 請求，而大型項(xiàng)目都會使用 Vuex 來管理數(shù)據(jù)。

前言：

使用 cnpm 安裝 axios

cnpm install axios -S

安裝其他插件的時(shí)候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每個(gè)需要發(fā)送請求的組件中即時(shí)

引入

為了解決這個(gè)問題，是在引入 axios 之后，修改原型鏈具體的實(shí)施請往下看~

改寫原型鏈

首先在 main.js 中引入 axios

import axios from 'axios'

這時(shí)候如果在其它的組件中，是無法使用 axios 命令的。但如果將 axios 改寫為 Vue 的原型屬性，就能解決這個(gè)問題

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: {          //需要發(fā)送的數(shù)據(jù)
    name: 'zhangwenwu2',
    age: '15'
   }
  })
  //請求成功后執(zhí)行then     如果直接在里面訪問 this，無法訪問到 Vue 實(shí)例，this指向發(fā)生了變化。建議使用箭頭函數(shù),下面有講
  .then(function (response) {
    console.log(response);  //處理后臺返回的數(shù)據(jù)
   }) 
  //請求失敗后執(zhí)行catch
  .catch(function(err){
    console.log(err)
   })
}

附錄：配置 axios

上面封裝的方法中，使用了 axios 的三個(gè)配置項(xiàng)，實(shí)際上只有 url 是必須的，完整的 api 可以參考使用說明

為了方便，axios 還為每種方法起了別名，比如上面的 saveForm 方法等價(jià)于：

axios.post('/user', context.state.test02)

完整的請求還應(yīng)當(dāng)包括 .then 和 .catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

當(dāng)請求成功時(shí)，會執(zhí)行 .then，否則執(zhí)行 .catch

這兩個(gè)回調(diào)函數(shù)都有各自獨(dú)立的作用域，如果直接在里面訪問 this，無法訪問到 Vue 實(shí)例，this指向發(fā)生了變化。

這時(shí)只要添加一個(gè) .bind(this) 就能解決這個(gè)問題,或者使用箭頭函數(shù)即可

.then(function(res){
 console.log(this.data)
}.bind(this))

 .then((res) => {
 console.log(this.data)
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽