Javascript异步请求响应回调的4种方式

0

异步请求响应回调的4种方式

阅读:910 时间:2019年05月20日

异步请求响应回调的4种方式◆  1. callback   (ES3)◆  2. Promise    (ES6)◆  3. Generator  (ES6)◆  4. Async...

异步请求响应回调的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


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^