将 callback 转换成 Promise
2018-08-02 本文已影响258人
kybetter
本文要介绍的是如何将 callback 转换成 Promise，主要是写了一个具体的例子。
首先请大家浏览一下这篇文章：
如何把 Callback 接口包装成 Promise 接口
接下来我遇到的问题是，如何把像 jquery 方式的 ajax 请求改成 promise 呢？
因为 jquery 的 ajax 有两个回调函数：success 和 error 用来接收成功的请求和错误。
那么，我们就可以根据上文的思路，在 success 和 error 中处理 promise 的消息就好了。
于是就有了以下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
// 将 jquery 的 ajax 方法封装为 Promise 方法
function post (url, params) {
return new Promise(
(resolve, reject) => {
jQuery.ajax({
url,
data: {...params},
type: "post",
success: function (res) {
resolve(res)
},
error: function (res) {
reject(res)
}
})
}
)
}
// 异步请求，使用 then 和 catch
function asyncPost () {
console.log('==== 异步请求 start =====')
post(
'http://removeUrl',
{
foo: 'qwwerwer'
}
).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
console.log('==== 异步请求 end =====')
}
// 同步请求，使用 async 和 await
async function syncPost() {
try {
console.log('==== 同步请求 start =====')
let res = await post(
'http://removeUrl',
{
foo: 'qwwerwer'
}
)
console.log(res)
console.log('==== 同步请求 end =====')
} catch (e) {
console.log(e)
}
}
</script>
</head>
<body>
<button onclick="promisePost()">promisePost提交</button>
<button onclick="asyncPost()">asyncPost提交</button>
</body>
</html>
