React中封装Axios

以下是一个在 React 中封装  Axios  的示例：

import axios from 'axios';

class HttpService {

  constructor(baseURL) {

    this.instance = axios.create({

      baseURL

    });

  }

 

  get(url, config = {}) {

    return this.instance.get(url, config);

  }

 

  post(url, data, config = {}) {

    return this.instance.post(url, data, config);

  }

 

  put(url, data, config = {}) {

    return this.instance.put(url, data, config);

  }

 

  delete(url, config = {}) {

    return this.instance.delete(url, config);

  }

}

 

export default HttpService;

 

 

在您的 React 组件中，可以这样使用：

 

import HttpService from './HttpService';

 

const httpService = new HttpService('https://your-base-url.com');

 

// 发送 GET 请求

httpService.get('/your-endpoint')

 .then(response => {

    // 处理响应

  })

 .catch(error => {

    // 处理错误

  });

 

// 发送 POST 请求

httpService.post('/your-endpoint', { key: 'value' })

 .then(response => {

    // 处理响应

  })

 .catch(error => {

    // 处理错误

  });

 

同时可以根据具体的需求在封装类中添加更多的功能，比如请求拦截器、响应拦截器、错误处理等。