异步请求响应回调的4种方式
异步请求响应回调的4种方式
◆ 1. callback (ES3)
◆ 2. Promise (ES6)
◆ 3. Generator (ES6)
◆ 4. Async (ES7)
使用最多的callback回调方式
function ajax_get_callback(param,callback){
setTimeout(() => {
let res = param + 100;
callback(res);
}, 1000);
}
ajax_get_callback(10,(res)=>{
console.log(res);
});Promise对象
function ajax_get_promise(param){
return new Promise((resolve,reject)=>{
setTimeout(() => {
let res = param + 100;
resolve(res);
}, 2000);
});
}
ajax_get_promise(20).then((res)=>{
console.log(res);
});Generator 星号函数
function* ajax_get_generator(param){
let res = yield ajax_get_generator_request(param);
console.log(res);
}
function ajax_get_generator_request(param){
setTimeout(()=>{
let res = param + 100;
gener.next(res);
},3000);
}
var gener = ajax_get_generator(30);
gener.next();Async 理想方式
function ajax_get_async_request(param){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
let res = param + 100;
resolve(res);
},4000)
});
}
async function ajax_get_async(param){
let res = await ajax_get_async_request(param);
console.log(res);
}
ajax_get_async(40);完整代码:
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<script>
/*
异步请求响应回调的几种方法
1. callback (ES3)
2. Promise (ES6)
3. Generator (ES6)
4. Async (ES7)
*/
// 1. 古老经典的callback
function ajax_get_callback(param,callback){
setTimeout(() => {
let res = param + 100;
callback(res);
}, 1000);
}
ajax_get_callback(10,(res)=>{
console.log(res);
});
// 2. Promise对象
function ajax_get_promise(param){
return new Promise((resolve,reject)=>{
setTimeout(() => {
let res = param + 100;
resolve(res);
}, 2000);
});
}
ajax_get_promise(20).then((res)=>{
console.log(res);
});
// 3. Generator 星号函数
function* ajax_get_generator(param){
let res = yield ajax_get_generator_request(param);
console.log(res);
}
function ajax_get_generator_request(param){
setTimeout(()=>{
let res = param + 100;
gener.next(res);
},3000);
}
var gener = ajax_get_generator(30);
gener.next();
//4. Async 理想方式
function ajax_get_async_request(param){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
let res = param + 100;
resolve(res);
},4000)
});
}
async function ajax_get_async(param){
let res = await ajax_get_async_request(param);
console.log(res);
}
ajax_get_async(40);
</script>
</body>
</html>参考文献：
Promise https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
Generator yield https://www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112
async await https://www.jianshu.com/p/ffa5cbe9ab29
2019-05-20 15:08:17
2226
0
参与讨论