Question

我在该项目中使用ReactJs和AXIOS，我想制作一个全局错误处理程序，而不会在各处传递添加catch的请求。我有一个收集所有请求的服务，并且正在创建它的新实例并使用它

import Axios from 'axios';
import { getSiteId } from '../helpers';

export class BaseService {
  baseRoute;
  promise;
  constructor() {
    let siteUrl = (process.env && process.env.REACT_APP_API_URL) || '';
    this.baseRoute = `${siteUrl}/api/v1`;

  }

  async create(item) {
    return await Axios.post(`${this.generateURL()}/`, item, {
      ...this.configuration,
    })
      .catch(error => {
        return this.errors(error);
      });

  }
  async update(item, id) {
    return await Axios.patch(`${this.generateURL(id)}`, item, {
      ...this.configuration,
    });
  }
  async filter(query) {
    return await Axios.get(`${this.generateURL()}`, {
      ...this.configuration,
      params: query,
    });

}

像这样创建一个新实例

let service= serviceFactory.getInstance();

然后访问任何功能

如何执行全局处理程序，将.catch添加到每个请求并呈现组件（例如模式）从全球出发，而不是传递到每个地方，我在以下地方使用这些功能

Answer 1

您可以使用Axios.create()方法。官方文档中的示例。

export const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

现在，您可以将其导出以在这样的任何地方使用。

import { instance } from './service'

与普通JS配合使用

const { instance } = require('./service')

Answer 2

您是否检查过，错误边界在反应中。该包装器组件可以包装整个组件，并捕获任何未捕获的jS错误/执行并显示任何后备UI。

https://reactjs.org/docs/error-boundaries.html

如何使用React和AXIOS创建全局处理程序？

2 个答案: