快捷導(dǎo)航

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

更新時(shí)間：2017年06月30日 16:33:13 作者：zhangwenwu2

本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

目前主流的 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     如果直接在里面訪問(wèn) this，無(wú)法訪問(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ú)立的作用域，如果直接在里面訪問(wèn) this，無(wú)法訪問(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3中使用Pinia修改State的五種方式
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2023-11-11
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue的route-view子頁(yè)面調(diào)用父頁(yè)面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁(yè)面調(diào)用父頁(yè)面的函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue 中 onclick和@click區(qū)別解析
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡(jiǎn)單點(diǎn)說(shuō)就是onclick 只能觸發(fā) js的原生方法,不能觸發(fā)vue的封裝方法,@click 只能觸發(fā)vue的封裝方法,不能觸發(fā)js的原生方法,需要的朋友可以參考下
2024-02-02
vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼
本文主要介紹了vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue登錄頁(yè)實(shí)現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁(yè)實(shí)現(xiàn)使用cookie記住7天密碼功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
使用Vue3和Plotly.js繪制動(dòng)態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動(dòng)態(tài)加載到圖表中并進(jìn)行實(shí)時(shí)更新,本文將展示如何使用Plotly.js和Vue.js實(shí)現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下
2024-06-06
vuejs中監(jiān)聽(tīng)窗口關(guān)閉和窗口刷新事件的方法
今天小編就為大家分享一篇vuejs中監(jiān)聽(tīng)窗口關(guān)閉和窗口刷新事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
少女風(fēng)vue組件庫(kù)的制作全過(guò)程
這篇文章主要給大家介紹了關(guān)于少女風(fēng)vue組件庫(kù)的制作全過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05