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',});
谨以此记录两种请求方式,后续会记录剩下的请求方式~