??前言
在之前的文章 axios 實(shí)戰(zhàn)進(jìn)階練習(xí)——基于 Vue3 + Node.js + ElementPlus 實(shí)現(xiàn)的聯(lián)系人列表管理后臺(tái) 中，我們完成了這個(gè)基于 Vue3 + Node.js + ElementPlus 實(shí)現(xiàn)的聯(lián)系人列表管理后臺(tái)的項(xiàng)目，其中項(xiàng)目的后端接口是用 Node.js 編寫的，通過 axios 來獲取接口，所以這篇文章我們來對(duì)這個(gè) axios 進(jìn)一步的封裝。
??為什么要封裝 axios ？
這是前端開發(fā)中非常經(jīng)典一個(gè)操作，同時(shí)也是一個(gè)面試會(huì)被問道的技術(shù)點(diǎn)，接下來我們從以下幾個(gè)原因來看看為什么要封裝 axios。
- 代碼復(fù)用和可維護(hù)性：通過封裝 axios ，可以將重復(fù)的HTTP請(qǐng)求邏輯進(jìn)行抽象和封裝，提高代碼的復(fù)用性，避免在多個(gè)地方編寫相同的請(qǐng)求代碼。同時(shí)，封裝后的 axios 實(shí)例也更易于維護(hù)和管理。
- 統(tǒng)一的請(qǐng)求處理：封裝 axios 可以實(shí)現(xiàn)對(duì)請(qǐng)求的統(tǒng)一處理。例如，可以在請(qǐng)求之前添加通用的請(qǐng)求頭部、設(shè)置默認(rèn)配置、統(tǒng)一處理錯(cuò)誤等。這樣可以減少重復(fù)的代碼，并且確保所有請(qǐng)求都遵循相同的規(guī)范和處理邏輯。
- 接口管理和版本控制：通過封裝 axios ，可以將各個(gè)API接口進(jìn)行集中管理，方便統(tǒng)一修改和維護(hù)。同時(shí)，可以通過封裝實(shí)現(xiàn)接口版本控制，確保不同版本的接口請(qǐng)求正確對(duì)應(yīng)相應(yīng)的版本。
- 攔截器的使用：axios 提供了攔截器 （interceptors） 功能，可以在請(qǐng)求發(fā)送和響應(yīng)返回時(shí)進(jìn)行攔截和處理。通過封裝axios，可以更方便地利用攔截器來實(shí)現(xiàn)請(qǐng)求和響應(yīng)的統(tǒng)一處理、認(rèn)證和授權(quán)、錯(cuò)誤處理等操作。
- 更好的擴(kuò)展性和適應(yīng)性：封裝 axios 可以提供更好的擴(kuò)展性和適應(yīng)性。例如，可以根據(jù)業(yè)務(wù)需求，自定義一些通用的請(qǐng)求方法或攔截器，以滿足特定的業(yè)務(wù)場(chǎng)景。
??如何封裝 axios ？
上面也大致說了關(guān)于封裝 axios 的一些必要性，接下來舉一個(gè)封裝的例子。
創(chuàng)建一個(gè) axios 實(shí)例：首先，我們需要?jiǎng)?chuàng)建一個(gè) axios 實(shí)例，并設(shè)置一些默認(rèn)的配置。這樣可以為后續(xù)的請(qǐng)求提供統(tǒng)一的配置。
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com', // 設(shè)置請(qǐng)求的基礎(chǔ)URL
timeout: 5000, // 設(shè)置請(qǐng)求超時(shí)時(shí)間
headers: {
'Content-Type': 'application/json' // 設(shè)置請(qǐng)求頭部
}
});
export default instance;
定義請(qǐng)求方法：根據(jù)項(xiàng)目需求，可以定義不同的請(qǐng)求方法 （例如GET、POST等），并配置相應(yīng)的攔截器和處理邏輯。
import axiosInstance from './axiosInstance';
// GET請(qǐng)求示例
export function get(url, params) {
return axiosInstance.get(url, { params })
.then(response => {
// 請(qǐng)求成功處理邏輯
return response.data;
})
.catch(error => {
// 請(qǐng)求失敗處理邏輯
throw error;
});
}
// POST請(qǐng)求示例
export function post(url, data) {
return axiosInstance.post(url, data)
.then(response => {
// 請(qǐng)求成功處理邏輯
return response.data;
})
.catch(error => {
// 請(qǐng)求失敗處理邏輯
throw error;
});
}
// 其他請(qǐng)求方法類似
使用封裝的請(qǐng)求方法：在項(xiàng)目中使用封裝的請(qǐng)求方法，發(fā)送具體的請(qǐng)求。
import { get, post } from './api';
// 發(fā)送GET請(qǐng)求
get('/users', { id: 1 })
.then(data => {
// 請(qǐng)求成功處理邏輯
console.log(data);
})
.catch(error => {
// 請(qǐng)求失敗處理邏輯
console.error(error);
});
// 發(fā)送POST請(qǐng)求
post('/login', { username: 'admin', password: '123456' })
.then(data => {
// 請(qǐng)求成功處理邏輯
console.log(data);
})
.catch(error => {
// 請(qǐng)求失敗處理邏輯
console.error(error);
});
// 其他請(qǐng)求使用方法類似
??對(duì)項(xiàng)目的 axios 進(jìn)一步封裝
通過上面內(nèi)容，我們也清楚了為什么要封裝 axios 了，同時(shí)也通過簡(jiǎn)單的案例演示，學(xué)習(xí)了如何封裝 axios ，接下來我們對(duì)上一篇文章的聯(lián)系人列表管理后臺(tái)的 axios 進(jìn)行封裝。
首先在 src 文件夾中新建一個(gè)文件夾 service ，并在其中創(chuàng)建一個(gè) contactService.js 文件夾，然后在該文件夾中對(duì) axios 進(jìn)行統(tǒng)一格式封裝，代碼如下。
export default {
//添加聯(lián)系人
insert: {
method: "post",
url: "insert",
},
//刪除聯(lián)系人
delete: {
method: "delete",
url: "delete",
},
//修改聯(lián)系人
update: {
method: "put",
url: "update",
},
//查詢聯(lián)系人列表
select: {
method: "get",
url: "select",
},
};
然后在 service 文件夾中繼續(xù)創(chuàng)建一個(gè) http.js 文件，在該文件中對(duì) axios 和 service/contactService.js 進(jìn)行引用，代碼如下。
import axios from "axios";
import service from "./contactService";
import { ElLoading, ElMessage } from "element-plus";
var loading = {
_load: null,
show() {
this._load = ElLoading.service({
text: "loading...",
});
},
hide() {
this._load.close();
},
};
// axios默認(rèn)數(shù)據(jù)
let instance = axios.create({
baseURL: "http://127.0.0.1:9999/api/",
timeout: 10000,
});
const Http = {};
for (let key in service) {
let api = service[key];
Http[key] = async function (params, isForData = false, config = {}) {
let newParams = {};
let response = {};
if (params && isForData) {
for (let i in params) {
newParams.append(i, params[i]);
}
} else {
newParams = params;
}
switch (api.method) {
case "put":
case "post":
case "patch":
try {
response = await instance[api.method](api.url, newParams, config);
} catch (err) {
response = err;
}
break;
case "get":
case "delete":
config.params = newParams;
try {
response = await instance[api.method](api.url, newParams, config);
} catch (err) {
response = err;
}
break;
}
return response;
};
}
// 攔截器的添加
// 請(qǐng)求攔截器
instance.interceptors.request.use(
(config) => {
// 請(qǐng)求中的加載提示
loading.show();
return config;
},
(err) => {
// 請(qǐng)求錯(cuò)誤
loading.hide();
ElMessage.error(JSON.stringify(err) + "請(qǐng)求錯(cuò)誤");
}
);
// 響應(yīng)式攔截器
instance.interceptors.response.use(
(res) => {
// 響應(yīng)成功
loading.hide();
return res.data;
},
(err) => {
// 響應(yīng)錯(cuò)誤
loading.hide();
ElMessage.error(JSON.stringify(err) + "響應(yīng)錯(cuò)誤");
}
);
export default Http;
這里局部調(diào)用 Http ，找到項(xiàng)目中有用到原生調(diào)用 axios 的地方通過 import Http from "@/service/http"; 引入 Http。
比如說，項(xiàng)目中的 refreshList() 方法，我們需要這個(gè)方法獲取到聯(lián)系人列表的數(shù)據(jù)，我們把原生的 axios 方法注釋掉，然后通過 用封裝的 Http 來重新實(shí)現(xiàn)這個(gè)方法，具體操作如下。
修改后的方法如下。
const refreshList = async () => {
let res = await Http.select();
contactList.list = res.data.data;
console.log(contactList.list);
};
然后我們可以看到頁面的數(shù)據(jù)同樣渲染出來了，而且控制臺(tái)也輸出了 contactList.list 的內(nèi)容。
采用封裝后的 axios 來讀取聯(lián)系人列表顯得特別精干、簡(jiǎn)練，除此之外我們也可以通過相同的方法對(duì)添加、刪除、修改聯(lián)系人的請(qǐng)求方法進(jìn)行改造。還有一點(diǎn)要注意的是，在項(xiàng)目不是非常龐大的情況下，還是要慎用 async 和 await 的異步方法，因?yàn)轭}目可能會(huì)導(dǎo)致連同調(diào)用它們的方法體也做異步處理。文章來源：http://www.zghlxwxcb.cn/news/detail-514755.html
??最后
到此，就是文章的全部?jī)?nèi)容了，通過這篇文章，我們了解學(xué)習(xí)了如何封裝 axios ，以及通過簡(jiǎn)單的案例了解封裝的步驟和方法，最后通過對(duì)項(xiàng)目 （基于 Vue3 + Node.js + ElementPlus 實(shí)現(xiàn)的聯(lián)系人列表管理后臺(tái)） 的 axios 進(jìn)行封裝實(shí)戰(zhàn)，加深了封裝 axios 的操作和方法。
文章來源地址http://www.zghlxwxcb.cn/news/detail-514755.html
到了這里，關(guān)于axios 實(shí)戰(zhàn)進(jìn)階練習(xí)（ axios 封裝篇）——基于 Vue3 + Node.js + ElementPlus 實(shí)現(xiàn)的聯(lián)系人列表管理后臺(tái)的 axios 封裝實(shí)戰(zhàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
