## 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!')
}
~~~
