vue2.0 axios前后端數(shù)據(jù)處理實例代碼
目前主流的 Vue 項目，都選擇 axios 來完成 ajax 請求，而大型項目都會使用 Vuex 來管理數(shù)據(jù)。
前言：
使用 cnpm 安裝 axios
cnpm install axios -S
安裝其他插件的時候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每個需要發(fā)送請求的組件中即時
引入
為了解決這個問題，是在引入 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: { //需要發(fā)送的數(shù)據(jù)
name: 'zhangwenwu2',
age: '15'
}
})
//請求成功后執(zhí)行then 如果直接在里面訪問 this，無法訪問到 Vue 實例，this指向發(fā)生了變化。建議使用箭頭函數(shù),下面有講
.then(function (response) {
console.log(response); //處理后臺返回的數(shù)據(jù)
})
//請求失敗后執(zhí)行catch
.catch(function(err){
console.log(err)
})
}
附錄：配置 axios
上面封裝的方法中，使用了 axios 的三個配置項，實際上只有 url 是必須的，完整的 api 可以參考使用說明
為了方便，axios 還為每種方法起了別名，比如上面的 saveForm 方法等價于：
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)請求成功時，會執(zhí)行 .then，否則執(zhí)行 .catch
這兩個回調(diào)函數(shù)都有各自獨立的作用域，如果直接在里面訪問 this，無法訪問到 Vue 實例，this指向發(fā)生了變化。
這時只要添加一個 .bind(this) 就能解決這個問題,或者使用箭頭函數(shù)即可
.then(function(res){
console.log(this.data)
}.bind(this))
.then((res) => {
console.log(this.data)
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實例
- 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開發(fā)一個谷歌插件的全過程
- 使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
- vue+elementUI組件遞歸實現(xiàn)可折疊動態(tài)渲染多級側(cè)邊欄導(dǎo)航
- Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)
相關(guān)文章
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue安裝sass-loader和node-sass版本匹配的報錯問題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡單點說就是onclick 只能觸發(fā) js的原生方法,不能觸發(fā)vue的封裝方法,@click 只能觸發(fā)vue的封裝方法,不能觸發(fā)js的原生方法,需要的朋友可以參考下2024-02-02
本文主要介紹了vue el-table實現(xiàn)遞歸嵌套的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
使用Vue3和Plotly.js繪制動態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動態(tài)加載到圖表中并進(jìn)行實時更新,本文將展示如何使用Plotly.js和Vue.js實現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法
今天小編就為大家分享一篇vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于少女風(fēng)vue組件庫的制作全過程，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05