vue.js簡(jiǎn)單配置axios的方法詳解
更新時(shí)間：2017年12月13日 15:25:11 作者：藍(lán)調(diào)爵士
axios是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了關(guān)于vue.js簡(jiǎn)單配置axios的相關(guān)資料，需要的朋友們可以參考借鑒，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
前言
官方現(xiàn)在已經(jīng)不再推薦用resource了，換了個(gè)axios，咱也不能落后，至少你得知道咋弄，面試的時(shí)候也好給面試官吹吹牛逼，廢話不多說(shuō)。
它本身具有以下特征：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
配置方法
首先用npm安裝
npm install --save axios vue-axios
安裝完之后，在你的main.js文件里配置，加上這兩句就好
import axios from 'axios' Vue.prototype.$http = axios
然后你讀取接口數(shù)據(jù)的時(shí)候，直接就可以這樣寫(xiě)，這個(gè)跟resource一個(gè)樣，我那個(gè)下面的op，uin之類的都是要傳的參數(shù)。
this.$http.post(localStorage.getItem("addUrl")+'/skynet_sync/btsp', {
"op": "update_card_num",
"uin": uin,
"protypeId": index,
"cardNumber": parseInt(v)
})
.then(response=> {
//如果接口走成功就執(zhí)行這里
}).catch(function (error) {
//接口失敗，也就是state不是200的時(shí)候，走這里
});
好了，搞定！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue-router如何實(shí)現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實(shí)現(xiàn)history模式配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹vue3中?provide?和?inject?用法及原理，provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問(wèn)題，下面文章是具體的用法和實(shí)現(xiàn)原理,具有一定的參考價(jià)值，需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
下面小編就為大家?guī)?lái)一篇Vue.js項(xiàng)目模板搭建圖文教程。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決
本文主要介紹了Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了vue中改變滾動(dòng)條樣式的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue?組件異步加載方式(按需加載)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js 動(dòng)態(tài)為img的src賦值方法
下面小編就為大家分享一篇Vue.js 動(dòng)態(tài)為img的src賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
el-table表格動(dòng)態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時(shí)遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動(dòng)態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07