前端发送请求之参数处理---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, // 超时，401headers: {'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',});

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