Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求，例如设置统一的请求前缀、头部、超时时间，统一处理请求和响应的格式，以及错误处理等。

以下是一个使用 TypeScript 进行 Axios 二次封装的详细场景使用案例：

1. 创建 Axios 实例

首先，创建一个 Axios 实例，并配置通用参数。

<code>import axios from 'axios';

const instance = axios.create({ -- -->

baseURL: 'https://api.example.com',

timeout: 10000, // 请求超时时间

headers: { 'Content-Type': 'application/json'}

});

export default instance;

2. 统一请求处理

封装请求方法，包括统一的请求前缀、头部处理等。

// 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. 响应拦截器

处理响应拦截器，统一处理响应数据格式。

// http.ts (继续上面的代码)

import axios, { AxiosInstance } from 'axios';

// 响应拦截器

instance.interceptors.response.use(response => {

// 对响应数据做点什么

return response.data;

}, error => {

// 对响应错误做点什么

return Promise.reject(error);

});

export default instance;

4. 错误处理

统一处理 HTTP 请求错误。

// http.ts (继续上面的代码)

import { AxiosError } from 'axios';

// 使用封装的请求函数

function handleError(error: AxiosError) {

if (error.response) {

// 请求已发出，服务器响应了状态码 2xx 之外的其他状态

console.error(error.response.data);

console.error(error.response.status);

console.error(error.response.headers);

} else if (error.request) {

// 请求已发出但没有收到响应

console.error(error.request);

} else {

// 发生了触发请求错误的问题

console.error('Error', error.message);

}

return Promise.reject(error);

}

export { handleError };

5. 使用封装的 HTTP 客户端

在组件或其他服务中使用封装的 HTTP 客户端进行请求。

// 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 请求

创建特定的 API 服务文件，如用户服务。

// 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 调用 ...

7. 使用特定的 API 服务

在组件中使用特定的 API 服务。

// 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);

}

}

}

};

通过上述步骤，你可以创建一个可维护性高、易于使用的 HTTP 客户端，它包括统一的配置、拦截器、错误处理和 API 调用封装。这使得在项目中进行 API 请求变得更加一致和方便。