基于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 = {}){

let params = {},

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)

})