vue中二次封装axios请求，支持url参数拼接、blob数据流和formdata上传等

现在vue项目基本上都是使用axios进行请求操作，但是axios有时候并不能完全满足业务的需求，因为官方axios只支持一些比较规则的请求参数和方式，比如body类型的post，params类型的get。

而实际业务中后台给的接口可不会那么如你所愿的规范，当后台同事肆意挥洒，尽情装逼，完全是即兴发挥，不考虑前端感受的时候，往往给出来的api接口是很变态的：

get方法的url后面拼接参数？

没办法，谁让前端是万能的呢，只能将就一下后台同事了。

实际项目中用到的最多的方式就是get和post，所以这里主要以封装get和post为例，patch、delete等方法封装与此类似。

分析：

get请求可以有的组合方式：

1、没有参数

2、有参数，参数以query的形式拼接在url上：api/customer?a=xxx&b=yyy

3、有参数，参数以path的形式拼接到url上：api/customer/xxx/yyy

4、有参数，参数以path的形式替换指定字段拼接到url上：api/customer/xxx/yyy

5、无参数，请求返回的数据为blob数据流形式

6、有参数，请求返回的数据为blob数据流形式，参数以path的形式拼接到url上，api/customer/xxx/yyy

7、有参数，请求返回的数据为blob数据流形式，参数以query的形式拼接到url上，api/customer?a=xxx&b=yyy

post请求可以有的组合方式：

1、没有参数

2、有参数，参数以json格式放在body里

3、有参数，参数以path的形式拼接到url上：api/customer/xxx/yyy

4、有参数，参数以query的形式拼接到url上：api/customer?a=xxx&b=yyy

5、无参数，上传formdata数据,部分参数以以json格式放在body里（选传）

6、有参数，上传formdata数据，部分参数以以json格式放在body里（选传），部分参数以path的形式拼接到url上，api/customer/xxx/yyy

7、有参数，上传formdata数据，部分参数以以json格式放在body里（选传）,部分参数以query的形式拼接到url上，api/customer?a=xxx&b=yyy

8、无参数，接收blob数据流，部分参数以以json格式放在body里（选传）

9、无参数，接收blob数据流，部分参数以以json格式放在body里（选传）,部分参数以path的形式拼接到url上，api/customer/xxx/yyy

10、无参数，接收blob数据流，部分参数以以json格式放在body里（选传）,部分参数以query的形式拼接到url上，api/customer?a=xxx&b=yyy

大致就罗列了这么些可能的组合，太多了！

封装请求：

在文件目录下新建service>reset-api.js和service>api-urls.js

api-urls.js 存放所有api接口

const apis = {
    // get
    get: '/api/shop/customer/get', // get
    getNormal: '/api/shop/customer/query', // query
    getOrderPath: '/api/shop/customer/getOrderPath', // getOrderPath
    getLocationPath: '/api/shop/customer/fileCode/page', // 指定字段替换
    getBlob: '/api/shop/customer/getBlob', // getBlob
    getPathBlob: '/api/shop/customer/getPathBlob', // getPathBlob
    getQueryBlob: '/api/shop/customer/getQueryBlob', // getQueryBlob
    // post
    postBody: '/api/shop/customer/body', // body
    postPath: '/api/shop/customer/body', // bodyPath
    postQuery: '/api/shop/customer/body', // bodyQuery
    postFormData: '/api/shop/customer/formData', // formData
    postFormDataPath: '/api/shop/customer/formDataPath', // formDataAndPath
    postFormDataQuery: '/api/shop/customer/formdataQuery', // formdataAndQuery
    postBlob: '/api/shop/customer/postBlob', // postBlob
    postBlobPath: '/api/shop/customer/postBlobPath', // postBlob
    postBlobQuery: '/api/shop/customer/postBlobQuery', // postBlobQuery
};

export default apis

get封装

为防止ie下get方法读取缓存，在url后默认添加时间戳_t字段

1、没有参数的时候，可直接使用别名方法：

                return axios.get(url, {
                    headers: {
                        token: token,
                    },
                });

 

2、query形式参数，可使用params字段

                return axios.get(url, {
                    params: data,
                    headers: {
                        token: token,
                    },
                });

3、参数按path拼接到url上

                if (Object.keys(data).length) {
                    for (let key in data) {
                        url += `/${data[key]}`;
                    }
                }
                url += `?_t=${Date.now()}`; // 加时间戳，防止ie取缓存
                return axios.get(url, {
                    headers: {
                        token: token,
                    },
                });

4、指定位置替换，path形式拼接到url上

url上必须包含需被替换的字段：api/customer/name/age

传参数时字段必须和要替换的一一对应：{name: 'abc',age:12}

被替换后：api/customer/abc/12

                if (Object.keys(data).le