vue3框架中使用axios调用接口

1. Axios 拦截器

请求拦截器示例：

// http.js
import axios from 'axios';

const http = axios.create({
  baseURL: 'http://your-api-url.com',
  timeout: 1000,
});

http.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

export default http;

响应拦截器示例：

// http.js (继续上面的代码)
http.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    if (response.data.code === 401) {
      // 处理未授权情况
      // 例如：跳转到登录页
    }
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

2. 并发请求处理

// concurrentRequests.js
import axios from 'axios';

async function fetchData() {
  try {
    const promises = [
      axios.get('http://api.example.com/users'),
      axios.get('http://api.example.com/products'),
    ];
    const results = await Promise.all(promises);
    console.log(results);
    // 处理并发请求的结果
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

export default fetchData;

3. 封装 Axios 实例

// apiService.js
import axios from 'axios';

const apiService = {
  get: (url) => axios.get(url),
  post: (url, data) => axios.post(url, data),
  // 可以根据需要添加更多的方法
};

export default apiService;

4. 使用 TypeScript 增强类型安全

// types.ts
export interface User {
  id: number;
  name: string;
}

// apiService.ts
import axios, { AxiosResponse } from 'axios';
import { User } from './types';

const apiService = {
  getUser: (id: number): Promise<AxiosResponse<User>> => {
    return axios.get<User>(`http://api.example.com/users/${id}`);
  },
  // 其他类型安全的方法
};

export default apiService;

5. 环境变量和配置分离

// env.js
const env = process.env.NODE_ENV || 'development';

const config = {
  development: {
    baseURL: 'http://dev.api.example.com',
  },
  production: {
    baseURL: 'http://api.example.com',
  },
};

export default config[env];

6. 错误处理

// errorHandling.js
import http from './http';

async function getUserData() {
  try {
    const response = await http.get('/users/me');
    return response.data;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    // 可以在这里添加更复杂的错误处理逻辑
  }
}

7. 取消请求

// cancelRequest.js
import axios from 'axios';
import CancelToken from 'axios-cancel';

CancelToken.assignConfig({ /* Axios 配置 */ });

const cancel = axios.Cancel;

function fetchUser(id, cancelToken) {
  return axios.get(`/users/${id}`, { cancelToken });
}

// 使用时
const source = CancelToken.source();
fetchUser(1, source.token)
  .then(response => console.log(response))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.error('Error fetching user:', error);
    }
  });

// 取消请求
source.cancel('Operation canceled by the user.');

内容来源：kimi