axios配置多个接口请求(一)——vue项目axios配置多个接口请求

axios配置多个接口请求(一)——vue项目axios配置多个接口请求

在 Vue 项目中使用 Axios 发起多个接口请求时，你可以按照以下方式进行配置：

1、创建一个单独的文件，例如 api.js，用于存放接口请求的配置和定义。

2、在 api.js 文件中，导入 Axios 并创建一个 Axios 实例，可以对其进行自定义配置，例如设置请求的基本 URL、请求拦截器、响应拦截器等。

// api.js

import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基本 URL
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前可以进行一些处理，例如添加请求头等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在接收到响应数据之前可以进行一些处理
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

3、在 api.js 文件中，定义多个接口请求函数，每个函数对应一个具体的接口请求。

// api.js

// ...（前面的代码省略）

// 定义接口请求函数
export function getUser(userId) {
  return instance.get(`/user/${userId}`);
}

export function updateUser(userId, data) {
  return instance.put(`/user/${userId}`, data);
}

export function deleteUser(userId) {
  return instance.delete(`/user/${userId}`);
}

// ...（定义其他接口请求函数）

4、在需要发起接口请求的组件中，导入并调用相应的接口请求函数。

// YourComponent.vue

import { getUser, updateUser, deleteUser } from '@/api';

export default {
  methods: {
    async fetchData() {
      try {
        const user = await getUser(123);
        console.log(user);

        const updatedUser = await updateUser(123, { name: 'John' });
        console.log(updatedUser);

        await deleteUser(123);
        console.log('User deleted successfully');
      } catch (error) {
        console.error(error);
      }
    },
  },
};

通过这种方式，你可以在 Vue 项目中轻松地配置和使用 Axios 进行多个接口请求。在 api.js 文件中，你可以对 Axios 进行进一步的配置和自定义，例如设置请求头、错误处理等。组件中可以直接导入对应的接口请求函数，并在需要的地方调用它们来发起接口请求。