axios は複数のインターフェイス リクエストを構成します (1) - Vue プロジェクト axios は複数のインターフェイス リクエストを構成します

axios は複数のインターフェイス リクエストを構成します (1) - Vue プロジェクト axios は複数のインターフェイス リクエストを構成します

Axios を使用して Vue プロジェクトで複数のインターフェイス リクエストを開始する場合、次のように設定できます。

api.js1.インターフェース要求の構成と定義を保存するための別のファイル (例: ) を作成します。

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 をさらに構成およびカスタマイズできます。対応するインターフェイス要求関数をコンポーネントに直接インポートし、インターフェイス要求を開始するために必要な場所で呼び出すことができます。