发布于 

生成器和异步

将异步代码变成同步（阻塞），例：你想向后台发送请求，只有当数据返回时才打印

  1. 发送ajax请求的方法
  2. 需要一个方法，发送请求后判断数据是否成功返回，继续往下执行
  3. 需要一个方法，等待数据返回，执行打印操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
let path = 'https://sunweipeng123.github.io/posts.json';

//ajax方法
function myAjax(url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(null, JSON.parse(xhr.responseText))
            } else {
                callback('请求失败', null)
            }

        }
    }
    xhr.open('get', url, true);
    xhr.send()
}

function foo(url) {
    myAjax(url, function (err, text) {
        if (err) {
            it.throw(err)
        } else {
            it.next(text)	//成功拿到数据后，启动生成器继续往下执行
        }
    })
}

function *main(){
    try {
        let text = yield foo(path)
        console.log(text)
    }
    catch(err){
        console.warn(err)
    }
}

let it = main();
it.next()

生成器+promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
let path = 'https://sunweipeng123.github.io/posts.json';

        //ajax方法
        function myAjax(url, callback) {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(null, JSON.parse(xhr.responseText))
                    } else {
                        callback('请求失败', null)
                    }

                }
            }
            xhr.open('get', url, true);
            xhr.send()
        }

        function foo(url) {
            return new Promise(function (resolve, reject) {
                myAjax(url, function (err, text) {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(text)
                    }
                })
            })

        }

        function* main() {
            try {
                let text = yield foo(path)
                console.log(text)
            }
            catch (err) {
                console.warn(err)
            }
        }

        let it = main();
        
        //等待promise决议
        let p = it.next().value
        p.then(function(text){
            it.next(text)
        },function(err){
            it.throw(err)
        })
许可协议

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。