axiosリクエストインターフェイスをどのようにカプセル化しますか？

1年 ago
陽, 向宇
1 minute

axiosリクエストインターフェースをエンクロージャする必要があります。以下の手順に従って操作してください。

  1. axiosをインストールするには、npmまたはyarnを使用してaxiosライブラリをインストールする必要があります。以下のコマンドをコマンドラインで実行できます。
npm install axios

あるいは

yarn add axios
  1. api.jsというファイルを作成してください：プロジェクトのsrcディレクトリにapi.jsというファイルを作成し、その中でaxiosライブラリをインポートしてください。
import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: 'http://api.example.com',  // 设置接口的基础url
  timeout: 5000  // 设置超时时间
});

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

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据进行处理，如统一处理错误信息等
    return response.data;
  },
  error => {
    // 响应错误时的处理
    return Promise.reject(error);
  }
);

export default service;
  1. axiosのラッパーインターフェースを使用する：axiosリクエストを行う必要がある箇所では、api.jsファイルをインポートし、ラッパーされたaxiosインターフェースを使用してリクエストを行うことができます。例えば、
import api from './api';

// 使用get请求
api.get('/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

// 使用post请求
api.post('/user', { name: 'John' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

axiosリクエストインターフェースの操作が完了しました。使用中には、実際のニーズに応じて、get、post、put、deleteなどの一般的なリクエストメソッドをさらにカプセル化して、プロジェクトで利用しやすくすることができます。

bannerAds