封装axios

import axios from 'axios'

let baseURL = 'http://localhost:8090'
const instance = axios.create({
    baseURL: baseURL,
    timeout:7000,
    headers:{}
})

//请求拦截器
instance.interceptors.request.use(function(config){
    config.headers.Authorization = localStorage.getItem('token') || ''
    return config;
},function(error){
    return Promise.reject(error);
})

//响应拦截器
instance.interceptors.response.use(function(response){
    if(response.status === 200){
        if(response.data && response.data.msg){
            return response.data.data
        }else{
            alert('网络异常')
        }
    }
},function(error){
    return Promise.reject(error)
})
export default instance


//封装api****************************
import axios from './fetch'

//首页商品列表(page,size)
export function fetchGoodList(params) {
    return axios({
        url:'/jd/getHotGoodList',
        method:'GET',
        params
    })
}

//获取商品详情(good_id)
export function fetchGoodDetail(params){
    return axios({
        url: '/jd/getGoodDetail',
        method:'GET',
        params
    })
}

//添加购物车
export function fetchAddToCart(data){
    return axios({
        url: '/jd/addToCart',
        method: 'POST',
        data
    })
}

<think>好的,我现在要回答用户关于如何封装Axios以提高复用性和可维护性的问题。首先,我需要回忆一下之前学过的Axios封装相关知识,并结合提供的引用内容来组织回答。 用户提到的引用中,引用[2]和[3]都涉及Axios封装技巧,特别是引用[2]详细讨论了优雅封装前端请求的方法。引用[4]和[5]虽然主要讲异步编程和文件下载,但可能也包含一些相关的优化策略。引用[1]提到高级技巧和最佳实践,这对整体结构可能有帮助。 首先,我应该明确封装Axios的主要目标:减少重复代码、统一处理错误、管理请求拦截、增强可维护性。接下来,我需要分步骤说明如何实现这些目标,比如创建实例、拦截器、统一错误处理、请求函数封装等。 然后,结合引用[2]中的内容,例如封装网络请求函数,可以举例说明如何创建请求和响应拦截器。同时,错误处理部分需要参考最佳实践,比如区分HTTP错误和业务逻辑错误,这可能在引用[3]或[4]中有提到。 另外,用户可能需要了解如何添加全局配置,比如baseURL和超时设置,这部分属于基础但重要的步骤。还需要考虑如何支持TypeScript,这在现代前端项目中很常见,引用[2]或[3]可能有相关建议。 最后,总结最佳实践,如模块化、可扩展性、维护文档等,可以引用[1]中的高级技巧部分来支持这些建议。同时,生成相关问题时要确保问题与封装Axios相关,比如优化方法、拦截器使用、与Vue/React集成等。 需要确保回答结构清晰,每个部分有代码示例,并且正确应用引用标注。检查是否所有行内数学表达式都正确使用$...$,但这里可能用不上数学公式。独立公式如果有的话用$$...$$,但Axios封装可能不需要。最后,确保语言是中文,代码语法正确,并自然添加引用标识。</think>以下是对Axios进行封装以提高复用性和可维护性的分步指南,结合最佳实践与行业经验: --- ### 一、基础封装步骤 1. **创建Axios实例** 通过`axios.create()`创建独立实例,避免全局配置污染: ```typescript const service = axios.create({ baseURL: 'https://api.example.com', timeout: 10000, headers: {'Content-Type': 'application/json'} }); ``` 2. **拦截器封装** - **请求拦截器**:统一添加Token、加密参数等[^2] ```typescript service.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${getToken()}`; return config; }); ``` - **响应拦截器**:统一处理错误码和数据格式化 ```typescript service.interceptors.response.use( response => response.data, error => handleError(error) // 统一错误处理函数 ); ``` 3. **统一错误处理** 区分网络错误、HTTP状态码错误和业务逻辑错误: ```typescript const handleError = (error) => { if (error.response) { // HTTP状态码错误(4xx/5xx) console.error(`API Error: ${error.response.status}`); } else if (error.request) { // 网络层错误(无响应) console.error('Network Error'); } else { // 代码逻辑错误 console.error('Request Setup Error'); } return Promise.reject(error); }; ``` --- ### 二、高级封装技巧 1. **请求函数工厂模式** 生成可复用的请求模板: ```typescript const createRequest = (method: Method) => { return <T>(url: string, data?: unknown): Promise<T> => service({ method, url, [method === 'GET' ? 'params' : 'data']: data }); }; export const get = createRequest('GET'); export const post = createRequest('POST'); ``` 2. **TypeScript深度集成** 通过泛型增强类型安全: ```typescript interface ResponseData<T> { code: number; data: T; message: string; } export const request = async <T>(config: AxiosRequestConfig): Promise<ResponseData<T>> => { return service(config); }; ``` 3. **取消请求支持** 使用CancelToken避免重复请求: ```typescript const pendingRequests = new Map(); export const addPending = (config) => { const key = `${config.url}&${config.method}`; config.cancelToken = new axios.CancelToken(cancel => { if (!pendingRequests.has(key)) pendingRequests.set(key, cancel); }); }; ``` --- ### 三、最佳实践总结 1. **模块化分层** - 基础配置层(实例创建) - 拦截器层(统一处理) - 业务接口层(按模块拆分API) 2. **可扩展性设计** - 通过适配器模式支持多环境配置 - 提供插件机制(如自动重试、缓存拦截) 3. **维护性增强** - 使用JSDoc标注接口文档 - 版本控制配置文件(如`api.config.js`) ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值