将已经存在的异步请求callback转换为同步promise
由于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?
更多内容请查看:
出处：http://www.cnblogs.com/weiqinl
个人主页http://weiqinl.com
github: weiqinl
简书:weiqinl
您的留言讨论是对博主最大的支持，感谢您的认真阅读。
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。https://www.cnblogs.com/weiqinl/p/9651515.html
