vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼
目前主流的 Vue 項(xiàng)目，都選擇 axios 來(lái)完成 ajax 請(qǐng)求，而大型項(xiàng)目都會(huì)使用 Vuex 來(lái)管理數(shù)據(jù)。
前言：
使用 cnpm 安裝 axios
cnpm install axios -S
安裝其他插件的時(shí)候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每個(gè)需要發(fā)送請(qǐng)求的組件中即時(shí)
引入
為了解決這個(gè)問(wèn)題，是在引入 axios 之后，修改原型鏈具體的實(shí)施請(qǐng)往下看~
改寫(xiě)原型鏈
首先在 main.js 中引入 axios
import axios from 'axios'
這時(shí)候如果在其它的組件中，是無(wú)法使用 axios 命令的。但如果將 axios 改寫(xiě)為 Vue 的原型屬性，就能解決這個(gè)問(wèn)題
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'
}
})
//請(qǐng)求成功后執(zhí)行then 如果直接在里面訪(fǎng)問(wèn) this，無(wú)法訪(fǎng)問(wèn)到 Vue 實(shí)例，this指向發(fā)生了變化。建議使用箭頭函數(shù),下面有講
.then(function (response) {
console.log(response); //處理后臺(tái)返回的數(shù)據(jù)
})
//請(qǐng)求失敗后執(zhí)行catch
.catch(function(err){
console.log(err)
})
}
附錄：配置 axios
上面封裝的方法中，使用了 axios 的三個(gè)配置項(xiàng)，實(shí)際上只有 url 是必須的，完整的 api 可以參考使用說(shuō)明
為了方便，axios 還為每種方法起了別名，比如上面的 saveForm 方法等價(jià)于：
axios.post('/user', context.state.test02)
完整的請(qǐng)求還應(yīng)當(dāng)包括 .then 和 .catch
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
當(dāng)請(qǐng)求成功時(shí)，會(huì)執(zhí)行 .then，否則執(zhí)行 .catch
這兩個(gè)回調(diào)函數(shù)都有各自獨(dú)立的作用域，如果直接在里面訪(fǎng)問(wèn) this，無(wú)法訪(fǎng)問(wèn)到 Vue 實(shí)例，this指向發(fā)生了變化。
這時(shí)只要添加一個(gè) .bind(this) 就能解決這個(gè)問(wèn)題,或者使用箭頭函數(shù)即可
.then(function(res){
console.log(this.data)
}.bind(this))
.then((res) => {
console.log(this.data)
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vuejs前后端數(shù)據(jù)交互之從后端請(qǐng)求數(shù)據(jù)的實(shí)例
- vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
- Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
- vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例
- 詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
- 詳解vue-Resource（與后端數(shù)據(jù)交互）
- vue+element開(kāi)發(fā)一個(gè)谷歌插件的全過(guò)程
- 使用vue-element-admin框架從后端動(dòng)態(tài)獲取菜單功能的實(shí)現(xiàn)
- vue+elementUI組件遞歸實(shí)現(xiàn)可折疊動(dòng)態(tài)渲染多級(jí)側(cè)邊欄導(dǎo)航
- Vue Element前端應(yīng)用開(kāi)發(fā)之獲取后端數(shù)據(jù)
相關(guān)文章
詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存
本篇文章主要介紹了詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
Vue項(xiàng)目如何實(shí)現(xiàn)rsa加密
這篇文章主要介紹了Vue項(xiàng)目如何實(shí)現(xiàn)rsa加密，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue?中ref()和?reactive()響應(yīng)式數(shù)據(jù)的使用方法
article介紹Vue3中ref()和reactive()函數(shù)的使用方法,ref()用于創(chuàng)建基本數(shù)據(jù)類(lèi)型的響應(yīng)式引用,reactive()用于創(chuàng)建響應(yīng)式對(duì)象,本文介紹Vue中ref()和reactive()響應(yīng)式數(shù)據(jù)的使用方法,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2024-02-02
Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問(wèn)題詳解
這篇文章主要介紹了Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問(wèn)題詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
仿照Element-ui實(shí)現(xiàn)一個(gè)簡(jiǎn)易的$message方法
這篇文章主要介紹了仿照Element-ui實(shí)現(xiàn)一個(gè)簡(jiǎn)易的$message方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue之el-select結(jié)合v-if動(dòng)態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動(dòng)態(tài)控制template顯示隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
el-checkbox-group?的v-model無(wú)法綁定對(duì)象數(shù)組的問(wèn)題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組，本文主要介紹了解決el-checkbox-group?的v-model無(wú)法綁定對(duì)象數(shù)組，感興趣的可以了解一下2023-05-05
VUE腳手架框架編寫(xiě)簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)
本文主要介紹了VUE腳手架框架編寫(xiě)簡(jiǎn)潔的登錄界面的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題
這篇文章主要介紹了vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題,文中還給大家提到了vue中axios解決跨域問(wèn)題和攔截器使用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03