React项目配置7(ES7的Async/Await的使用)

本教程总共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 key in 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 apiManager from './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 apiManager from './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、那怎么写呢?

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

这里需要安装一个依赖,

npm i -S babel-polyfill

引入

import "babel-polyfill";
import apiRequestAsync from '../../../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。

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

网络嗅探器

网络嗅探器:把网卡设置成混杂模式,并可实现对网络上传输的数据包的捕获与分析。 原理:   通常的套接字程序只能响应与自己MAC地址相匹配的 或者是 广播形式发出...

469100
来自专栏嵌入式程序猿

那些年,我们追过的MCU复位

概述 在嵌入式系统中,复位(Reset)功能的应用非常广泛。复位是MCU工作开始的标志,MCU中所有的初始化工作都是在复位之后开始的。在实际应用中,我们也可以通...

40160
来自专栏逸鹏说道

★Kali信息收集★8.Nmap :端口扫描

突然发现,微信一次最多推送8篇 参数:(Zenmap是Nmap图形化工具,不想打指令的可以直接使用) 详细:https://nmap.org/man/zh/in...

58140
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理

前言 本节主要是关注者(即用户)和用户组的管理,微信公众号提供了用户和用户组的管理,我们可以在微信公众号官方里面进行操作,添加备注和标签,以及移动用户组别,同...

58060
来自专栏帘卷西风的专栏

关于cocos2dx客户端程序的自动更新解决方案

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

23210
来自专栏黑泽君的专栏

关于tomcat启动时的警告 :Property maxActive is not used in DBCP2, use maxTotal instead. 和 Property maxWait i

我们现在用的tomcat大概都是8.5 或是9.0,这些版本的tomcat内置的DBCP2,和以前老版本如tomcat 7的连接池不一样,7.0等老版本用的是D...

92120
来自专栏移动端周边技术扩展

iOS打开系统功能对应的URL

18830
来自专栏bboysoul

如何在metasploit中使用shodan

首先打开metasploit sudo service postgresql start msfconsole

13230
来自专栏向治洪

android优化之省电

Android程序中耗电最多的地方在以下几个方面 : 1、 大数据量的传输。 2、 不停的在网络间切换。 3、 解析大量的文本数据。 那么我们怎么样来改...

203100
来自专栏散尽浮华

openssl版本升级操作记录

需要部署nginx的https环境,之前是yum安装的openssl,版本比较低,如下: [root@nginx ~]# yum install -y pcre...

1.3K90

扫码关注云+社区

领取腾讯云代金券