關于axios封裝模塊的一點疑問？

今天看到一些代碼，其實應該算是關于模塊化相關知識范疇吧，因為用到了axios，所以取了這么一個標題

基于axios封裝的模塊如下：

fetch.js

import axios from 'axios';

// 創(chuàng)建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()創(chuàng)建的這個對象并沒有fetch()方法呀？

回答

編輯回答

紓惘

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

每一個模塊只加載一次，每一個JS只執(zhí)行一次，如果下次再去加載同目錄下同文件，直接從內存中讀取。一個模塊就是一個單例，或者說就是一個對象；
每一個模塊內聲明的變量都是局部變量，不會污染全局作用域；
模塊內部的變量或者函數可以通過export導出；
一個模塊可以導入別的模塊；

在這里fetch.js里實例化了一個axios實例，在需要的地方（通常是actions里）導入后之后，相當于導入了一個axios.create()，這不過這里導入的是一個已經擁有全局參數和全局攔截器的方法。
2，不明白你的意思，在導入的地方使用，沒記錯應該是以參數內的為準，封裝的話可以省事一點，也可以配置一些全局的參數，例如請求超時，請求頭，token什么的，當然還有攔截器和過濾器。
3，參考1.
以上回答，僅僅是個人理解，僅供參考，更多請參閱工具的官方文檔等。

2017年8月26日 08:37

編輯回答

小眼睛

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
    })

2018年9月11日 21:54

編輯回答

落殤

fetch === service
這個service是axios新創(chuàng)建的一個實例
所以下面這個文件你可以理解為：

import axios from 'axios';

// 創(chuàng)建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是什么東西，可以看看下面這幾篇文章