第二篇 promis+axios+qs请求封装

简单概括封装axios请求需要用到知识点

• axios请求config配置axios请求config配置
• GET，DELETE参数使用params接受

1. params 是即将与请求一起发送的 URL 参数 必须是一个无格式对象(plain object)或 URLSearchParams 对象

2. paramsSerializer 是一个负责 params 序列化的函数 paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat:
   ‘brackets’})},

3. arrayFormat 可以格式化你的数组参数
   arrayformat选项输出 指定数组的格式
   qs.stringify({ id: [‘b’, ‘c’] }, { arrayFormat: ‘indices’ })
   ‘id[0]=b&id[1]=c’
   qs.stringify({ id: [‘b’, ‘c’] }, { arrayFormat: ‘brackets’ })
   ‘id[]=b&id[]=c’
   qs.stringify({ id: [‘b’, ‘c’] }, { arrayFormat: ‘repeat’ })
   ‘id=b&id=c’

• POST，PUT参数使用data接受

// data 是作为请求主体被发送的数据
// 只适用于这些请求方法 ‘PUT’, ‘POST’, 和 ‘PATCH’
// 在没有设置 transformRequest 时，必须是以下类型之一：
// - string, plain object(无格式化对象), ArrayBuffer(缓冲数组), ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob（二进制）
// - Node 专属： Stream这里是引用

• header 请求头的配置

//1.multipart/form-data 此种方式多用于文件上传
//2.application/json 现在越来越多的应用使用application/json,用来告诉服务端消息主体是序列化的json字符串。由于json规范的流行，各大浏览器都开始原生支持JSON.stringfy。
//3.application/x-www-form-urlencoded 最开始的请求方式中，请求参数都是放在url中，表单提交的时候，都是以key=&value=的方式写在url后面。
//这也是浏览器表单提交的默认方式 request.getInputStream或request.getReader获取到请求内容

import axios from 'axios'
import qs from 'qs'

export default (url='',data={},type='GET',contentType) => {
    return new Promise((resolve,reject)=>{
        let requestConfig = {
            method: type,
            url:url,
            header: {
                'Accept':'application/json',//接受：应用/JSON'，
                'Content-Type':contentType ? contentType : 'application/json'
            },
            timeout:2000
        };
        switch ( type.toUpperCase() ) {
            case "GET":
                requestConfig.params = data;          
                requestConfig.paramsSerializer = (params) => {
                    return qs.stringify(params,{indices:false})
                };
                break;
                // `params` 是即将与请求一起发送的 URL 参数
                // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
                // `paramsSerializer` 是一个负责 `params` 序列化的函数
                // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
                //paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: 'brackets'})},
                /**
                 *  arrayFormat 可以格式化你的数组参数
                    arrayformat选项输出 指定数组的格式
                　　qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'indices' })
                　　'id[0]=b&id[1]=c'
                　　qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'brackets' })
                　　'id[]=b&id[]=c'
                　　qs.stringify({ id: ['b', 'c'] }, { arrayFormat: 'repeat' })
                　　'id=b&id=c'
                 */ 
                case "DELETE":
                    requestConfig.params = data
                    break;
                case "PUT":
                    requestConfig.data = data
                    break;
                case "PUT":
                    requestConfig.data = data
                    break;
                // `data` 是作为请求主体被发送的数据
                // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
                // 在没有设置 `transformRequest` 时，必须是以下类型之一：
                // - string, plain object(无格式化对象), ArrayBuffer(缓冲数组), ArrayBufferView, URLSearchParams
                // - 浏览器专属：FormData, File, Blob（二进制）
                // - Node 专属： Stream
        }
        //1.multipart/form-data 此种方式多用于文件上传
        //2.application/json  现在越来越多的应用使用application/json,用来告诉服务端消息主体是序列化的json字符串。由于json规范的流行，各大浏览器都开始原生支持JSON.stringfy。
        //3.application/x-www-form-urlencoded 最开始的请求方式中，请求参数都是放在url中，表单提交的时候，都是以key=&value=的方式写在url后面。
        //这也是浏览器表单提交的默认方式 request.getInputStream或request.getReader获取到请求内容
        if ((type === 'POST' || type === 'PUT') && contentType !=='multipart/form-data') {
            requestConfig.data = contentType ? qs.stringify(data) : JSON.stringify(data)
        }
        axios(requestConfig)
        .then((response)=>{
            resolve(response.data)
        })
        .catch((error)=>{
            reject(error)
        })
    })
}