关于axios封装模块的一点疑问？

Question

今天看到一些代码，其实应该算是关于模块化相关知识范畴吧，因为用到了axios，所以取了这么一个标题

基于axios封装的模块如下：

fetch.js

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  timeout: 5000              
});

//删除拦截器部分代码

export default service;

调用该模块的其他模块：

import fetch from '@/utils/fetch';
function GetFetchPromise(
    url, 
    data = {},
    type = 'get',
    params = {},
    headers = {},
    timeout = 5000) {
    return fetch({//问题在这儿
        url: url,
        method: type,
        params: data,
        data: params,
        headers,
        timeout
    })
}

问题：
1、在调用模块里面使用 fetch({/*很多键值对*/})，倒入进来的一个变量名fetch这儿怎么能当作方法使用呢？
2、传进去的参数直接和覆盖fetch.js模块axios.create()参数是一个意思？
3、fetch.js里面export default service;表示导出一个模块，那么在调用模块里面怎么不是fetch.xxxx()xxxx应为export对象的方法吧？但是axios.create()创建的这个对象并没有fetch()方法呀？

Answer 1

1,首先你要明白 import 和export的作用，

1. 每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2. 每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3. 模块内部的变量或者函数可以通过export导出；
4. 一个模块可以导入别的模块；

在这里fetch.js里实例化了一个axios实例，在需要的地方（通常是actions里）导入后之后，相当于导入了一个axios.create()，这不过这里导入的是一个已经拥有全局参数和全局拦截器的方法。
2，不明白你的意思，在导入的地方使用，没记错应该是以参数内的为准，封装的话可以省事一点，也可以配置一些全局的参数，例如请求超时，请求头，token什么的，当然还有拦截器和过滤器。
3，参考1.
以上回答，仅仅是个人理解，仅供参考，更多请参阅工具的官方文档等。

Answer 2

fetch === service
这个service是axios新创建的一个实例
所以下面这个文件你可以理解为：

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  timeout: 5000              
});

function GetFetchPromise(
    url, 
    data = {},
    type = 'get',
    params = {},
    headers = {},
    timeout = 5000) {
    return service({//问题在这儿
        url: url,
        method: type,
        params: data,
        data: params,
        headers,
        timeout
    })
}

至于这个axios.create是什么东西，可以看看下面这几篇文章

1. axios的使用姿势
2. axios源码解析

希望能帮到你

Answer 3

axios.create({
timeout: 5000
});
这个东西新建一个 可以自定义的axios 实例，返回的是一个axios 实例，就是一个axios对象，所以

fetch({//问题在这儿
        url: url,
        method: type,
        params: data,
        data: params,
        headers,
        timeout
    })
相当于


 axios({//问题在这儿
        url: url,
        method: type,
        params: data,
        data: params,
        headers,
        timeout
    })

Answer 4

去我的文章里面看，有一篇专门说怎么配置axios的，简单的一比。无悬念！望采纳！