## 1. 数据请求封装
### 1.1公用性方法：请求路由多参数处理与需要转成formData的处理
~~~
export function encodeForm (form = {}) {
return Object.keys(form)
.map(key => {
return [key, form[key]].map(encodeURIComponent).join('=');
})
.join('&');
}
// 样例输入： form = {name: 'xiaopi',age: '22'}
// 样例输出: name=xiaopi&age=22
export function objectToFormData (data = {}) {
const formData = new FormData()
for (const key of Object.keys(data)) {
formData.append(key, data[key]);
}
return formData;
}
~~~
### 1.2fetch request封装
思路： 分步式处理
~~~
// 文件request.js
function parseJSON(response) {
return response.json();
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
// 异常处理
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default function request(url, options = {}) {
return fetch(url, options)
.then(checkStatus)
.then(parseJSON)
.then(data => {
return data
})
.catch(err => ({ err }));
}
~~~
### 1.3所有请求放在同一文件处理
思路: 请求接口时，先在总请求文件dataService.js 中创建方法，方法名建议与接口名一致（这样易查找），然后将传入参数规定好，再在需要请求的地方调用dataService里的方法。
优点: 方便维护，在测试中如果有接口需要更改参数名称但值不变的，或者需要更改请求类型之类的可以直接在dataService中查找更改。
缺点: 每次请求时都需要先创建一个方法，如果测试中某个接口需要的参数添加一个字段，则需要在调用的地方与dataService中都做更改。
~~~
// 文件dataService.js
// 先引request（必须的）
import request from '../utils/request';
// 案例（仅做参考）：
/**
* 添加新的人
* @param name 性别
* @param age 年龄
*/
export function addPeople({name = '', age = ''}) {
return request(`/people/addPeople?name=${name}&age=${age}`);
}
/**
* 获取某个人的信息
* @param id 区分不同人的标识
*/
export function getPeople({id= ''}) {
return request(`/people/getPeople?id=${id}`, { type: 'POST' });
}
~~~
~~~
import * as dataService from ../services/dataService
// 发送请求在实际中大多放在某个方法中调用，此处简写
const response = dataService.addPeople({name: 'xiaopi',age: 22})
if(response.data){
console.log('you success!')
}
~~~
