东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

大班taipanbet官方网站

15174744838
联系方式
全国服务热线: 15174744838

咨询热线:13925534605
联系人:高春铭
地址:武汉市武昌区友谊大道芭莎公馆2-2-1905室

将已经存在的异步请求callback转换为同步promise

来源:大班taipanbet官方网站   发布时间:2019-07-02   点击量:239

由于js是单线程执行,为防止阻塞,会有很多异步回调函数callback,嵌套层次多了,可读性就差了很多。随着社区的发展,出现了promise。我们来将一些常见的回调函数做修改,变成promise的链式调用,简洁,清晰明了。

先理解一点点概念。

每个promise都有三个状态。pending、Fulfilled、Rejected。最初为pending,状态一但改变为Fulfilled、Rejected中的一种,即成永远,不再改变。

pending: 等待状态。

Fulfilled: 表示成功完成。

Rejected: 表示被拒绝,失败。

原生的ajax请求

/** * 原生请求 */function nativeRequest(url) { var xhr = new XMLHttpRequest() // 这里我建议的书写顺序是: onreadystatechange -> open -> send // 这样,onreadystatechange 可以获取 readyState 的状态 1 2 3 4 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { // 请求已完成,且响应已就绪 if (xhr.status === 200) { // TODO: 处理返回正常的数据 xhr.responseText } else { // TODO: 处理返回非正常的数据 } } } xhr.open("GET", url, true) xhr.send(null)}

promise 风格的请求

/** * promisify request * 返回promise对象 */function promiseRequest(url) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(xhr.responseText) } else { reject(xhr.responseText) } } } xhr.open("GET", xhr, true) xhr.send(null) }).catch(err => { console.log(err) })}

jquery中的ajax请求

这里只使用ajax请求中的get请求,使用常见的几个参数。

/** * ajax get请求 */function ajaxResponse(url) { $.ajax({ url: url, type: "GET", success: res => { console.log(res) }, error: err => { console.log(err) } })}

转换为promise风格

/** * promise风格的ajax get请求 * 返回promise对象 * 这里同时用到了es6中的解构赋值默认值和函数参数默认值 */function promiseAjaxResponse(url, { type = "GET", } = {}) { return new Promise((resolve, reject) => { $.ajax({ url, type, success: res => { resolve(res) }, error: err => { reject(err) } }) })}

node风格的callback请求

nodeGet(param, function (err, data) { })

TO:

function nodeGetAysnc(param) { return new Promise((resolve, reject) => { nodeGet(param, function (err, data) { if (err !== null) return reject(err) resolve(data) }) })}

DOM load事件 或者其他一次性事件

function load() { console.log("onload - end")}window.onload = load

TO promise

function promiseLoad() { return new Promise(function (resolve, reject) { window.onload = resolve })}promiseLoad().then(load)

参考

1.How do I convert an existing callback API to promises?2.How do I promisify native XHR?

相关产品

COPYRIGHTS©2017 大班taipanbet官方网站 ALL RIGHTS RESERVED 备案号:239