使用Axios結(jié)合Typescript二次封裝完整詳細場景使用案例

更新時間：2024年11月09日 09:29:41 作者：夲奮亻Jay

本文詳細介紹了如何使用TypeScript對Axios進行二次封裝,以提高HTTP請求的統(tǒng)一管理和可維護性,通過創(chuàng)建Axios實例、封裝請求和響應處理、錯誤處理以及創(chuàng)建特定的API服務,可以實現(xiàn)更加一致和方便的API調(diào)用,需要的朋友可以參考下

前言

Axios 是一個基于 promise 的 HTTP 客戶端，用于瀏覽器和 node.js。二次封裝 Axios 主要是為了統(tǒng)一管理 HTTP 請求，例如設置統(tǒng)一的請求前綴、頭部、超時時間，統(tǒng)一處理請求和響應的格式，以及錯誤處理等。

以下是一個使用 TypeScript 進行 Axios 二次封裝的詳細場景使用案例：

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. 響應攔截器

處理響應攔截器，統(tǒng)一處理響應數(shù)據(jù)格式。

// http.ts (繼續(xù)上面的代碼)
import axios, { AxiosInstance } from 'axios';

// 響應攔截器
instance.interceptors.response.use(response => {
  // 對響應數(shù)據(jù)做點什么
  return response.data;
}, error => {
  // 對響應錯誤做點什么
  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ā)出，服務器響應了狀態(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ā)出但沒有收到響應
    console.error(error.request);
  } else {
    // 發(fā)生了觸發(fā)請求錯誤的問題
    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 請求

創(chuàng)建特定的 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 調(diào)用 ...

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

通過上述步驟，你可以創(chuàng)建一個可維護性高、易于使用的 HTTP 客戶端，它包括統(tǒng)一的配置、攔截器、錯誤處理和 API 調(diào)用封裝。這使得在項目中進行 API 請求變得更加一致和方便。