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

相关推荐
aesthetician4 小时前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
Nan_Shu_6144 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店4 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖5 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒5 小时前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser5 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan5 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family5 小时前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_5 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend5 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome