vue axios用法教程詳解
axios是vue-resource后出現(xiàn)的Vue請(qǐng)求數(shù)據(jù)的插件。vue更新到2.0之后,作者尤大就宣告不再對(duì)vue-resource更新,而是推薦的axios。
下面我們來(lái)使用axios
npm install axios --save-dev import axios from "axios"
這時(shí)候如果在其它的組件中，是無(wú)法使用 axios 命令的。但如果將 axios 改寫(xiě)為 Vue 的原型屬性，就能解決這個(gè)問(wèn)題
1 1. Vue.prototype.$ajax=axios
好像還有另外一種方法，是不需要去修改Vue的原型的，那就是我們除了npm install安裝axios依賴(lài)以外，再去安裝一個(gè)vue-axios
npm install vue-axios --save-dev<br>import Vueaxios from "vue-axios"
我都是用第一種方法的，這種沒(méi)試過(guò)，有興趣大家可以去試試。
在 main.js 中添加了這兩行代碼之后，就能直接在組件的 methods 中使用 $ajax 命令
methods: {
submitForm () {
this.$ajax({
method: 'post',
url: '你的請(qǐng)求url',
data: {
name: 'haha','
}
})
}
上述只是寫(xiě)了發(fā)起請(qǐng)求，并沒(méi)有請(qǐng)求返回?cái)?shù)據(jù)的回調(diào)。
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
這是axios的回調(diào)函數(shù)，.then為請(qǐng)求成功的回調(diào)函數(shù)，而.catch為請(qǐng)求失敗的回調(diào)函數(shù)
這兩個(gè)回調(diào)函數(shù)都有各自獨(dú)立的作用域，如果直接在里面訪問(wèn) this，無(wú)法訪問(wèn)到 Vue 實(shí)例，怎么辦嘞？？？？
只要添加一個(gè) .bind(this) 就能解決這個(gè)問(wèn)題
then(function(res){
console.log(this.data)
}.bind(this))
以上所述是小編給大家介紹的vue axios用法教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
本文主要介紹了Vue實(shí)現(xiàn)模糊查詢搜索功能的步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
在Vue項(xiàng)目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開(kāi)發(fā)中,字體文件通常是頁(yè)面加載時(shí)間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶體驗(yàn)可能會(huì)受到影響,本文將詳細(xì)探討如何在 Vue.js 項(xiàng)目中優(yōu)化字體文件的加載和緩存,以提高頁(yè)面性能,需要的朋友可以參考下2024-09-09
element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
原生開(kāi)發(fā)和Vue開(kāi)發(fā)的模式和特點(diǎn),我們會(huì)發(fā)現(xiàn)是完全不同的,這里其實(shí)涉及到兩種不同的編程范式:命令式編程和聲明式編程,下面這篇文章主要給大家介紹了關(guān)于Vue簡(jiǎn)介、引入、命令式與聲明式編程的相關(guān)資料,需要的朋友可以參考下2022-10-10
element自定義表單驗(yàn)證上傳身份證正反面的實(shí)現(xiàn)
表單驗(yàn)證在很多地方都可以用的到，本文主要介紹了element自定義表單驗(yàn)證上傳身份證正反面的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
基于vue2.0實(shí)現(xiàn)的級(jí)聯(lián)選擇器
這篇文章主要介紹了基于vue2.0實(shí)現(xiàn)的級(jí)聯(lián)選擇器，基于Vue的級(jí)聯(lián)選擇器，可以單項(xiàng)，二級(jí)， 三級(jí)級(jí)聯(lián)，多級(jí)級(jí)聯(lián)，有興趣可以了解一下2017-06-06
詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
使用vue自定義指令開(kāi)發(fā)表單驗(yàn)證插件validate.js
今天就來(lái)介紹一下如何利用vue的自定義指令directive來(lái)開(kāi)發(fā)一個(gè)表單驗(yàn)證插件的過(guò)程,需要的朋友可以參考下2019-05-05
Vite環(huán)境變量配置是Vite開(kāi)發(fā)環(huán)境下重要的一環(huán),它能夠根據(jù)不同的環(huán)境變量對(duì)項(xiàng)目進(jìn)行不同的配置,使得項(xiàng)目更加靈活和可維護(hù),本文就來(lái)介紹一下vite環(huán)境變量配置小結(jié),感興趣的可以了解一下2023-11-11