微信公众号首发
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
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文件，把公共部分抽取出来！
const xmlNative = (opt, type) => {
opt = opt || {};
opt.method = opt.method.toUpperCase() ||'POST';
opt.url = opt.url ||'';
opt.async = opt.async ||true;
opt.data = opt.data ||null;
opt.success = opt.success ||function () {
};
let xmlHttp =new XMLHttpRequest();
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') {
let params = [];
for (let keyin opt.data) {
params.push(key +'=' + opt.data[key]);
}
let postData = params.join('&');
xmlHttp.open(opt.method, opt.url +'?' + postData, opt.async);
xmlHttp.send(null);
}
if (type ===1) {
return new Promise((resolve, reject) => {
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState ===4) {
if (xmlHttp.status ===200) {
let responseText = JSON.parse(xmlHttp.responseText);
if (responseText.code ===0) {
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 default xmlNative
2.修改之前的 apiRequest.js
import xmlNative from './xmlNative'
import apiManagerfrom './apiManager'
const ajax = (url, method, data, successCB, errorCB) => {
let dataJson = {
version:"1.0.0",
data: data
};
return xmlNative({
method: method,
url: url,
data: dataJson,
success: (data, status) => {
if (data.code ===0) {
successCB && successCB(data, status)
}else {
errorCB ? errorCB(data, status) :console.log(data, status)
}
},
error: (data, status) =>console.log(status, status)
});
};
const apiRequest = {
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 default apiRequest;
3.新建apiRequestAsync.js
import xmlNative from './xmlNative'
import apiManagerfrom './apiManager'
const ajax = (url, method, data) => {
let dataJson = {
version:"1.0.0",
data: data
};
return xmlNative({
method: method,
url: url,
data: dataJson
}, 1);
};
const apiRequestAsync = {
get: (apiName, data) =>ajax(apiManager[apiName], "get", data),
post: (apiName, data) =>ajax(apiManager[apiName], "post", data)
};
export default apiRequestAsync;
到这里就封装完了，我讲解下一些地方，如果没讲到的地方，大家不懂的可以留言问我！
if (type ===1) {
return new Promise((resolve, reject) => {
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState ===4) {
if (xmlHttp.status ===200) {
let responseText = JSON.parse(xmlHttp.responseText);
if (responseText.code ===0) {
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";
import apiRequestAsyncfrom '../../../public/js/apiRequestAsync';
书写 es7 async await
async handleTodoList() {
let todoList =await apiRequestAsync.post('todoList');
this.setState({list: todoList.list});
let todoList1 =await apiRequestAsync.post('todoList');
console.log(todoList1);
let todoList2 =await apiRequestAsync.post('todoList');
console.log(todoList2);
}
OK，看下浏览器效果
它渲染了 todolist，也打印出了todoList1及todoList2。
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论