基於React.js + ANT DESIGN 中使用非同步請求之----fetch封裝
1，閱讀宣告：關於fecth封裝基於React.js以及螞蟻金服推出的ANT DESIGN前端UI框架，語法使用ES6；
2，在專案中安裝whatwg-fetch,命令列命令-----cnpm install whatwg-fetch --save
3，在src目錄下建立一個units資料夾，該資料夾下建立一個index.js檔案，在該js檔案中開始封裝(個人毛病，喜歡做到條理清晰)；
4，以下操作在index.js檔案上
5，首先引入whatwg-fetch -----import 'whatwg-fetch'
6，建立一個可對外的ajaxApi方法：
export function ajaxApi(url,option = {}){
letparams = {},
method = option.method || 'get',
data = option.data || {};
data['token'] = "ejilajfkfjaifwwjckdedklswe";
swicth (method){
case 'get' :
url = url + (data ? '?' +formDataCode(data) : '');
break;
case 'post':
params.headers= {};
params.body = formDataCode(data);
params.header['Content-Type' ] = "application/x-www-form-urlencoded; charset=UTF-8";
default:
}
return fetch(url,params).then(callback).catch(errHandle);
}
//建立修改引數格式的方法，改成提交的Form Data格式
function formDataCode(data){
let str = '';
for(let i in data){
if(data.hasOwnProperty(i)){
str = str + i +"=" +data[i] + '&';
}
}
retrun str ? str.substring(0,str.length - 1) : '';
}
//建立fetch中then方法的回撥
function callback(res){
return res.json().then( response =>{
if(!response){
throw "伺服器返回引數錯誤"
}else if(response.errcode == 40001){
throw "token失效，請重新整理頁面"
}else if(response.errcode == -1){
return response
}
return response;
})
}
//建立容錯方法
function errHandle(res){
if(res.errcode == -1){
alert(res.errmsg)
}
}
7，在src 下面新建service資料夾，在該資料夾下面新建自己的js檔案（多人共同開發時）
//在user.js中
import { ajaxApi } from '../units';
exprot const userList = (data) =>ajaxApi(url，{method:"post",data})
8，在自己的當前頁面引用user.js中的方法
import { usrtList } from '../service/user'
userList().then((res) =>{
console.log(res)
})