我如何创建一个模块来运行一些样板代码以保持我的代码库干燥

Question

I am doing this in all my vue modules

import axios from 'axios'
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.withCredentials = true

I would like to not repeat this and preferably do something like

import axios from './myaxios'

I tried:

import axios from 'axios'

function myaxios () {
    axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
    axios.defaults.xsrfCookieName = 'csrftoken'
    axios.defaults.withCredentials = true
    return axios
}

export default myaxios

Does not work. What am I doing wrong?

Answer 1

You also have to call the function. Or just do it outside the function.

import axios from 'axios'

function myaxios() {
    axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
    axios.defaults.xsrfCookieName = 'csrftoken'
    axios.defaults.withCredentials = true
    return axios
}

export default myaxios()

OR

import axios from 'axios'

axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.withCredentials = true

export default axios

Answer 2

When you're doing that, you're simply exporting the function myaxios() without actually invoking/calling it. You simply have to do it once, and probably in your main app.js file (or the first entry point of your app):

In the module, you can export the function as you have done. In your entry file, simply import the module:

// Import module
import myaxios from '/path/to/myaxious/module';

And then you have to invoke it so that the global settings will be set properly:

// Invoke module's default exported function
myaxios();