前端发送请求之参数处理---multipart/form-data与application/x-www-form-urlencoded

Content-Type就是指 HTTP 发送信息至服务器时的内容编码类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。

其实前后端发送请求的方式有 text/plain、application/json、application/x-www-form-urlencoded、
multipart/form-data等，这版先介绍【multipart/form-data】与【application/x-www-form-urlencoded】。

1、application/x-www-form-urlencoded

前端发送请求，需要对入参做处理

const params = new URLSearchParams();
    // options为需要传递的参数，如{a: 3, b: 4}
    Object.keys(options).forEach(key => {
      params.append(key, options[key]);
    });

调用请求：

return request({
    path: `/apis/list`,
    params: params,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
  });

2、multipart/form-data

let formData = new FormData();
    // options为入参，格式如：{a: 3, b: 4}
    Object.keys(options).forEach(key => {
      formData.append(key, options[key]);
    });

发送请求：

return request({
    path: `/apis/list`,
    params: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    method: 'POST',
  });

两种发送请求的方式都是将入参转换：{a:1,b:2} => a=1&b=2，可以在底层采用统一的方式来处理。

/* 对象转化URL（{a:1,b:2} => a=1&b=2） */
export const toUrlParam = (obj) => {
    var url = '';
    Object.keys(obj).forEach((key) => {
        url += key + '=' + obj[key] + '&';
    });
    if (url && url.length > 0) {
        url = url.substring(0, url.length - 1);
    }
    return url;
};

const instance = axios.create({
    timeout: 30000, // 超时，401
    headers: {
        'X-Requested-With': "XMLHttpRequest"
    },
    withCredentials: true
});

export const request = ({ path, params = {}, headers = {}, method = 'post' }) => {
    method = method.toLocaleLowerCase();
    let url = `${API_URL}${path}`;
    if (method === 'get') {
        url += `?${toUrlParam(params)}`;
    }
    return instance.request({
        method,
        url,
        data: toUrlParam(params),
        headers
    });
};

直接发送请求：

return request({
    path: `/apis/list`,
    params: options,
    method: 'POST',
  });

谨以此记录两种请求方式，后续会记录剩下的请求方式~