vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用
更新時(shí)間：2022年04月24日 17:20:21 作者：清城幻影
這篇文章主要介紹了vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用，Axios?是一個(gè)基于?promise?的?HTTP?庫，下面文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
一、什么是axios
簡單的來說，?Axios 是一個(gè)基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，我們?cè)陧?xiàng)目中會(huì)經(jīng)常用axios請(qǐng)求接口來獲取數(shù)據(jù)。
二、下載方式
直接在當(dāng)前使用的項(xiàng)目中打開終端：
npm install axios --save 或者yarn? add? axios
三、攔截器
攔截器就是在數(shù)據(jù)請(qǐng)求的過程中，攔截請(qǐng)求或者攔截響應(yīng)的技術(shù)
- 請(qǐng)求攔截器：就是在發(fā)送請(qǐng)求的時(shí)候進(jìn)行一些操作
- 響應(yīng)攔截器：就是攔截在響應(yīng)的時(shí)候進(jìn)行的一些操作，比如登錄錯(cuò)誤返回登錄狀態(tài)
實(shí)現(xiàn)方法也很簡單，直接在src文件下面新建一個(gè)utils文件夾，新建js文件，名字隨意
import axios from "axios"
let service=axios.create()
service.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
export default service四、請(qǐng)求的封裝
封裝好的請(qǐng)求一般情況下都是放在api文件夾下面，這樣在用的時(shí)候也就非常方便了，只要在用的地方引用進(jìn)去你就可以直接使用
例如：
import axios from "axios"
let getAction=(url)=>{
return new Promise((resolve,reject)=>{
axios({
url,
method:"GET"
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
}
export default getAction五、使用
當(dāng)你封裝好了請(qǐng)求之后使用起來也是非常的方便，在使用的.vue文件中去引用，使用
// import getAction from @/api/index
到此這篇關(guān)于vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用的文章就介紹到這了,更多相關(guān)axios封裝和使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue props用法詳解(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于vite打包拆分js和css的配置指南,Vite是一個(gè)非?？焖俚墓ぞ?它可以幫助你打包JavaScript文件,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令directive的使用方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-04-04
vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡
放大鏡在很多地方都可以使用的到，本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue開發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn)
這篇文章主要為大家介紹了vue開發(fā)之LogicFlow自定義業(yè)務(wù)節(jié)點(diǎn),有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
crypto-js對(duì)稱加密解密的使用方式詳解(vue與java端)
這篇文章主要介紹了如何在Vue前端和Java后端使用crypto-js庫進(jìn)行AES加密和解密,前端通過創(chuàng)建AES.js文件來實(shí)現(xiàn)加密解密功能,并在Vue文件或JavaScript中使用,后端則可以直接使用Java代碼進(jìn)行AES加密和解密操作,需要的朋友可以參考下2025-01-01
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了使用vue導(dǎo)出excel遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04