Axios结合Typescript 二次封装完整详细场景使用案例

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

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

1. 创建 Axios 实例

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

复制代码
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 请求变得更加一致和方便。

相关推荐
excel4 分钟前
webpack 核心编译器 十四 节
前端
excel11 分钟前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github