如何在每个http调用中为axios创建默认请求标头的配置? [英] How do I create configuration for axios for default request headers in every http call?

问题描述

https://github.com/MrFiniOrg/AxiosQuestion

我想设置项目，以便不必在每个http调用中都指定相同的请求标头.

I would like to have my project setup so that I do not have to specify the same request header in every http call.

我已经在线搜索了此内容，但无法在我的项目中完成此操作.

I have searched this online but I have not been able to accomplish this in my project.

有人可以协助我解决我遇到的这个问题. 我是axios的新手，我不确定如何配置它.

Would someone please assist me in resolving this issue I am having. I am new to react and axios and I am not sure how to configure this.

我的项目似乎正在执行此操作，但是它发送了2次请求. 一个带标题，另一个不带标题.

My project seems to be doing this but it is sending the request 2 times. One with the header and one without.

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

My axios call can be found in the app.js class component

推荐答案

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

You can specify config defaults that will be applied to every request.

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

有关更多具体信息，请访问其文档.

For more specific info, please visit their docs.

更新:

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

1..在您的index.js文件(表示顶级aka根"文件)中，您可以配置request/ response方法.像这样:

1. In your index.js file [meaning the top-level aka 'root' file] you can configure your request/ response methods. Something like this:

    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 并将特定的配置放入其中.像这样:

---

2. Or you can create a new file, a new instance of your axios.js file to be precise and import the configurations separately in your components where you might need them. You could name it, eg axiosConfig.js and put your specific configs inside of it. Something like this:

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

After that you would import this file to components that need it and use it instead of the previous Axios [node_modules] import, like this:

Example.js

Example.js

import React, { Component } from 'react';
// import axios from 'axios'; We don't need this anymore
import axiosConfig from '../../axios'; // 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文件中进行的配置. [如果它们是相同的配置，那就是:)]

NOTE: You can combine these two methods as needed, but remember that the configurations made in your configAxios.js file will overwrite those made in your index.js file [if they are the same configurations, that is :) ]

这篇关于如何在每个http调用中为axios创建默认请求标头的配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！