使用Axios結(jié)合Typescript二次封裝完整詳細(xì)場景使用案例
前言
Axios 是一個基于 promise 的 HTTP 客戶端,用于瀏覽器和 node.js。二次封裝 Axios 主要是為了統(tǒng)一管理 HTTP 請求,例如設(shè)置統(tǒng)一的請求前綴、頭部、超時時間,統(tǒng)一處理請求和響應(yīng)的格式,以及錯誤處理等。
以下是一個使用 TypeScript 進(jìn)行 Axios 二次封裝的詳細(xì)場景使用案例:
1. 創(chuàng)建 Axios 實例
首先,創(chuàng)建一個 Axios 實例,并配置通用參數(shù)。
import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 10000, // 請求超時時間 headers: {'Content-Type': 'application/json'} }); export default instance;
2. 統(tǒng)一請求處理
封裝請求方法,包括統(tǒng)一的請求前綴、頭部處理等。
// http.ts import axios from './path/to/axiosInstance'; // 添加一個通用的請求前綴 function request(url: string, config?: AxiosRequestConfig) { const fullPath = `/api/${url}`; // 可以在這里添加通用的 header 或其他配置 const defaultConfig = { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }; return axios({ url: fullPath, ...config, ...defaultConfig }); } export default request;
3. 響應(yīng)攔截器
處理響應(yīng)攔截器,統(tǒng)一處理響應(yīng)數(shù)據(jù)格式。
// http.ts (繼續(xù)上面的代碼) import axios, { AxiosInstance } from 'axios'; // 響應(yīng)攔截器 instance.interceptors.response.use(response => { // 對響應(yīng)數(shù)據(jù)做點什么 return response.data; }, error => { // 對響應(yīng)錯誤做點什么 return Promise.reject(error); }); export default instance;
4. 錯誤處理
統(tǒng)一處理 HTTP 請求錯誤。
// http.ts (繼續(xù)上面的代碼) import { AxiosError } from 'axios'; // 使用封裝的請求函數(shù) function handleError(error: AxiosError) { if (error.response) { // 請求已發(fā)出,服務(wù)器響應(yīng)了狀態(tài)碼 2xx 之外的其他狀態(tài) console.error(error.response.data); console.error(error.response.status); console.error(error.response.headers); } else if (error.request) { // 請求已發(fā)出但沒有收到響應(yīng) console.error(error.request); } else { // 發(fā)生了觸發(fā)請求錯誤的問題 console.error('Error', error.message); } return Promise.reject(error); } export { handleError };
5. 使用封裝的 HTTP 客戶端
在組件或其他服務(wù)中使用封裝的 HTTP 客戶端進(jìn)行請求。
// SomeComponent.vue import http from './path/to/http'; import { handleError } from './path/to/http'; export default { async created() { try { const response = await http('/user', { method: 'get' }); this.user = response.data; } catch (error) { handleError(error); } } };
6. 封裝特定的 API 請求
創(chuàng)建特定的 API 服務(wù)文件,如用戶服務(wù)。
// api/user.ts import http from '../http'; export const getUser = (userId: string) => http(`/users/${userId}`); export const updateUser = (userId: string, userData: object) => http(`/users/${userId}`, { method: 'put', data: userData }); // 其他 API 調(diào)用 ...
7. 使用特定的 API 服務(wù)
在組件中使用特定的 API 服務(wù)。
// SomeComponent.vue import { getUser, updateUser } from './api/user'; export default { methods: { async fetchUser() { try { const user = await getUser('123'); this.user = user; } catch (error) { handleError(error); } }, async saveUser() { try { await updateUser('123', { name: 'New Name' }); } catch (error) { handleError(error); } } } };
通過上述步驟,你可以創(chuàng)建一個可維護(hù)性高、易于使用的 HTTP 客戶端,它包括統(tǒng)一的配置、攔截器、錯誤處理和 API 調(diào)用封裝。這使得在項目中進(jìn)行 API 請求變得更加一致和方便。
總結(jié)
到此這篇關(guān)于使用Axios結(jié)合Typescript二次封裝完整詳細(xì)場景使用案例的文章就介紹到這了,更多相關(guān)Axios結(jié)合Typescript二次封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript解析任意形式的json樹型結(jié)構(gòu)展示
這篇文章主要介紹了JavaScript解析任意形式的json樹型結(jié)構(gòu)展示的相關(guān)資料,需要的朋友可以參考下2017-07-07JavaScript實現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能【兼容IE6】
這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能,可兼容IE6及谷歌等瀏覽器,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-09-09詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化
本篇文章主要介紹了詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript檢測用戶是否在線的6種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中實現(xiàn)檢測用戶是否在線的6種常用方法,文中的示例代碼講解詳細(xì),感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-08-08layui加載數(shù)據(jù)顯示loading加載完成loading消失的實例代碼
今天小編就為大家分享一篇layui加載數(shù)據(jù)顯示loading加載完成loading消失的實例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js實現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10