Vue中Axios的封裝與接口管理詳解
一、 Axios 的封裝
在 Vue 項目中，和后臺進行數(shù)據(jù)交互是頻繁且不可或缺的，剛開始沒進行 Axios 封裝的時候，每次請求后臺數(shù)據(jù)都是寫的完整的路徑，特別長，尤其是基準地址，每次都要復制一遍加在前面，冗余特別大。封裝完 Axios 后，調用接口就簡短多了，如果后期出現(xiàn)基準地址的改變，只需要在配置中更改一次即可。
安裝 Axios
npm install axios
引入
我們先在 src 文件夾下創(chuàng)建一個 utils 文件，再在該文件夾下創(chuàng)一個 requery.js 文件
requery.js
import axios from 'axios' axios.defaults.baseURL = "http://...." // 這里寫接口基準地址 export default axios
接口管理
我們再在 src 文件夾下創(chuàng)建一個 api 文件，里面存放接口
我們把一個模塊相關的接口封裝在一個 .js 文件中，例如我現(xiàn)在創(chuàng)建一個信息管理模塊的接口管理文件，取名為 messageManege.js
① 首先要在該文件中引入我們的 requery.js 文件
import request from '@/utils/requery'
② 封裝方法為 post 的接口
//獲取所有驗收數(shù)據(jù)
export const getAllCheck = () => request({
method:'post',
url:"manager/selectAllCheckInfo"
})
③ 封裝方法為 get 的接口
//獲取所有延期數(shù)據(jù)
export const getAllDelay = () => request({
url:"manager/selectAllPostponeInfo"
})
④ 封裝參數(shù)要拼接在鏈接后面的接口
//驗收狀態(tài)處理
export const CheckHandle = (x1,x2) => {
return request({
method: 'post',
url:`manager/check?status=${x1}&&id=${x2}`
})
}
⑤ 封裝請求頭為 "Content-Type": "application/json" 的接口
export const UpdateStage = data => {
return request({
method: 'post',
url: 'stage/update',
headers: {
"Content-Type": "application/json",
},
data: data
})
}
注意這里要傳入的 data 要轉換成 json 格式
統(tǒng)一暴露接口
在 src/api 的下面新建 index.js 文件用來統(tǒng)一暴露所有接口
import {
getAllCheck,CheckHandle,getAllDelay,UpdateStage
} from './messageManage'
export const getAllCheckAPI = getAllCheck
export const CheckHandleAPI = CheckHandle
export const getAllDelayAPI = getAllDelay
export const UpdateStageAPI = UpdateStage
在組件中使用
① mounted() 中使用
async mounted() {
const res = await getAllCheckAPI();
console.log(res.data) // 打印返回的數(shù)據(jù)
},
② 在普通方法中的使用
async StartProcess(s, i) {
// 調用后端接口
return CheckHandleAPI(s, i).then((res) => {
if (res.status == 200) {
this.$message.success("狀態(tài)修改成功!");
} else {
this.$message.error("狀態(tài)修改失敗!");
}
});
},
這樣 axios 的封裝和使用就完成啦~
補充：封裝get方法和post方法
我們常用的ajax請求方法有get、post、put等方法，相信小伙伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。
get方法：我們通過定義一個get函數(shù)，get函數(shù)有兩個參數(shù)，第一個參數(shù)表示我們要請求的url地址，第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象，當axios其請求成功時resolve服務器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數(shù)。
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});}post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數(shù)對象進行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個很重要，如果沒有序列化操作，后臺是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}這里有個小細節(jié)說下，axios.get()方法和axios.post()在提交數(shù)據(jù)時參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個參數(shù)是一個{}，然后這個對象的params屬性值是一個參數(shù)對象的。而post的第二個參數(shù)就是一個參數(shù)對象。兩者略微的區(qū)別要留意哦！
總結
到此這篇關于Vue中Axios的封裝與接口管理的文章就介紹到這了,更多相關Vue Axios封裝與接口內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue實現(xiàn)瀏覽器打印功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁面修改 meta，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細介紹了IDEA安裝vue插件圖文，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了vue項目中掃碼支付的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue-photo-preview圖片預覽失效的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點
本篇文章主要介紹了詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要介紹了詳解用vue-cli來搭建vue項目和webpack，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了基于vue hash模式微信分享#號的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解vue2.0+axios+mock+axios-mock+adapter實現(xiàn)登陸
這篇文章主要介紹了詳解vue2.0+axios+mock+axios-mock+adapter實現(xiàn)登陸，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
contenteditable 屬性為網(wǎng)頁開發(fā)者提供了一種靈活的方式來創(chuàng)建可編輯的內容區(qū)域,使用戶可以直接在網(wǎng)頁上進行內容編輯,而無需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下2023-12-12