React项目配置7

1、React项目配置1(如何管理项目公共js方法)---2018.01.11

2、React项目配置2(自己封装Ajax)---2018.01.12

3、React项目配置3(如何管理项目API接口)---2018.01.15

4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16

5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17

6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18

7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增)

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

我们今天讲下ES7的Async/Await的使用！

1、首先需要改造下AJAX请求

我们新建 xmlNative.js文件，把公共部分抽取出来！

constxmlNative= (opt,type) => {

opt = opt {};

opt.method= opt.method.toUpperCase()'POST';

opt.url= opt.url'';

opt.async= opt.asynctrue;

opt.data= opt.datanull;

opt.success= opt.successfunction() {

};

letxmlHttp =newXMLHttpRequest();

if(opt.method.toUpperCase() ==='POST') {

xmlHttp.open(opt.method,opt.url,opt.async);

xmlHttp.setRequestHeader('Content-Type','application/json; charset=utf-8');

xmlHttp.send(JSON.stringify(opt.data));

}else if(opt.method.toUpperCase() ==='GET') {

letparams = [];

for(letkeyinopt.data) {

params.push(key +'='+ opt.data[key]);

}

letpostData = params.join('&');

xmlHttp.open(opt.method,opt.url+'?'+ postData,opt.async);

xmlHttp.send(null);

}

if(type ===1) {

return newPromise((resolve,reject) => {

xmlHttp.onreadystatechange= () => {

if(xmlHttp.readyState===4) {

if(xmlHttp.status===200) {

letresponseText = JSON.parse(xmlHttp.responseText);

if(responseText.code===) {

resolve(responseText.data)

}else{

reject(responseText.message)

}

}else{

reject(JSON.parse(xmlHttp.responseText),xmlHttp.status)

}

}

};

})

}else{

xmlHttp.onreadystatechange= () => {

if(xmlHttp.readyState===4) {

if(xmlHttp.status===200) {

opt.success(JSON.parse(xmlHttp.responseText),xmlHttp.status)

}else{

opt.error(JSON.parse(xmlHttp.responseText),xmlHttp.status)

}

}

};

}

};

export defaultxmlNative

2.修改之前的 apiRequest.js

importxmlNativefrom'./xmlNative'

importapiManagerfrom'./apiManager'

constajax= (url,method,data,successCB,errorCB) => {

letdataJson = {

version:"1.0.0",

data: data

};

returnxmlNative({

method: method,

url: url,

data: dataJson,

success: (data,status) => {

if(data.code===) {

successCB && successCB(data,status)

}else{

errorCB ? errorCB(data,status) :console.log(data,status)

}

},

error: (data,status) =>console.log(status,status)

});

};

constapiRequest = {

get: (apiName,data,successCB,errorCB) =>ajax(apiManager[apiName],"get",data,

data => successCB && successCB(data.data,data.systemDate),

errorCB),

post: (apiName,data,successCB,errorCB) =>ajax(apiManager[apiName],"post",data,

data => successCB && successCB(data.data,data.systemDate),

errorCB)

};

export defaultapiRequest;

3.新建apiRequestAsync.js

importxmlNativefrom'./xmlNative'

importapiManagerfrom'./apiManager'

constajax= (url,method,data) => {

letdataJson = {

version:"1.0.0",

data: data

};

returnxmlNative({

method: method,

url: url,

data: dataJson

},1);

};

constapiRequestAsync = {

get: (apiName,data) =>ajax(apiManager[apiName],"get",data),

post: (apiName,data) =>ajax(apiManager[apiName],"post",data)

};

export defaultapiRequestAsync;

到这里就封装完了，我讲解下一些地方，如果没讲到的地方，大家不懂的可以留言问我！

if(type ===1) {

return newPromise((resolve,reject) => {

xmlHttp.onreadystatechange= () => {

if(xmlHttp.readyState===4) {

if(xmlHttp.status===200) {

letresponseText = JSON.parse(xmlHttp.responseText);

if(responseText.code===) {

resolve(responseText.data)

}else{

reject(responseText.message)

}

}else{

reject(JSON.parse(xmlHttp.responseText),xmlHttp.status)

}

}

};

})

这个type完全是自定义的，type===1的时候，返回一个Promise，因为await等待的就是一个 Promise！

4.我们来测试一下

先看看原来的请求是否还正常

一切正常！

5.为什么要用 es7 async await

它主要是为了解决如下场景：

比如需求是我的请求的某个参数是需要上一个请求的结果：

类是于这样：

这样请求下去，会进入到回调地域里！

所有用es7 async await来解决这个问题

6、那怎么写呢？

其实也很简单，之前我们已经封装好了，我们来写下试试！

这里需要安装一个依赖，

npmi-S babel-polyfill

引入

import"babel-polyfill";

importapiRequestAsyncfrom'../../../public/js/apiRequestAsync';

书写 es7 async await

asynchandleTodoList() {

lettodoList =awaitapiRequestAsync.post('todoList');

this.setState({list: todoList.list});

lettodoList1 =awaitapiRequestAsync.post('todoList');

console.log(todoList1);

lettodoList2 =awaitapiRequestAsync.post('todoList');

console.log(todoList2);

}

OK，看下浏览器效果

它渲染了 todolist，也打印出了todoList1及todoList2。

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!