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

Question

https://github.com/MrFiniOrg/AxiosQuestion

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

我在网上搜索过这个，但我无法在我的项目中完成这个。

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

我的项目似乎正在这样做，但它发送了 2 次请求。一个有标题，一个没有。

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

原文由 UncleFifi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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';

有关更具体的信息，请访问他们的 文档。

更新：

您可以通过两种方式做到这一点：

1. 在你的 index.js 文件 [意思是顶级又名“根”文件] 你可以配置你的 request/ response 方法。是这样的：

 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 [ _nodemodules ] 导入，如下所示：

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 文件中所做的配置 [如果它们是相同的配置，那是 ：） ]

原文由 Dzenis H. 发布，翻译遵循 CC BY-SA 4.0 许可协议