reactjs - 如何为每个 http 调用中的默认请求 header 创建 axios 配置？

Question

https://github.com/MrFiniOrg/AxiosQuestion

我希望设置我的项目，这样我就不必在每个 http 调用中指定相同的请求 header 。

我已经在网上搜索过这个，但我无法在我的项目中实现这一点。

有人可以帮助我解决我遇到的这个问题吗？我是 React 和 axios 的新手，我不知道如何配置它。

我的项目似乎正在这样做，但它发送了两次请求。一种带标题，一种不带标题。

我的axios调用可以在app.js类组件中找到

Answer 1

您可以指定将应用于每个请求的配置默认值。

全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

有关更多具体信息，请访问他们的docs .

更新:

您可以通过两种方式实现:

1. 在您的 index.js 文件中(即顶级又名“根”文件)，您可以配置您的请求/响应 方法。像这样的事情:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';

axios.interceptors.request.use(request => {
    console.log(request);
    // Edit request config
    return request;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    console.log(response);
    // Edit response config
    return response;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

ReactDOM.render( <App />, document.getElementById( 'root' ) );
registerServiceWorker();

<小时/>

2. 或者，您可以创建一个新文件，准确地说，是 axios.js 文件的新实例，然后在您的组件中单独导入配置可能需要它们。您可以为其命名，例如 axiosConfig.js，并将您的特定配置放入其中。像这样的事情:

axiosConfig.js

// First we need to import axios.js
import axios from 'axios';
// Next we make an 'instance' of it
const instance = axios.create({
// .. where we make our configurations
    baseURL: 'https://api.example.com'
});

// Where you would set stuff like your 'Authorization' header, etc ...
instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN FROM INSTANCE';

// Also add/ configure interceptors && all the other cool stuff

instance.interceptors.request...

export default instance;

之后，您可以将此文件导入到需要它的组件中，并使用它来代替之前的 Axios [node_modules] 导入，如下所示:

Example.js

import React, { Component } from 'react';
// import axios from 'axios'; We don't need this anymore
import axiosConfig from '../../axiosConfig'; // But instead our new configured version :)

class Example extends Component {
    state = {
        data: [],
        error: false
    }

    componentDidMount () {
        // We could name (import) it as axios instead, but this makes more sense here ... 
        axiosConfig.get('/posts' )
            .then(response => {
                   this.setState({data: response});
                });
            })
            .catch(error => {
                this.setState({error: true});
            });
    }

注意:您可以根据需要组合这两种方法，但请记住，在 configAxios.js 文件中进行的配置将覆盖这些配置在您的 index.js 文件中制作[如果它们是相同的配置，那就是:)]