promise then方法將會返回一個(gè)promise,所以js支持鏈?zhǔn)疆惒?/p>

var getJSON = function (url, callback) {
    var promise = new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;//readyState屬性的值由一個(gè)值變?yōu)榱硪粋€(gè)值時(shí)，都會觸發(fā)readystatechange事件
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();

        function handler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                callback(this.response);
                resolve(this.response);
            } else {
                reject(new Error(this.statusText))
            }
        };
    });
    return promise;
};
getJSON("./e2e-tests/get.json", function (resp) {
    console.log("get:" + resp.name);
}).then(function (json) {
    getJSON("./e2e-tests/get2.json", function (resp) {
        console.log("get2:" + resp.name);
    })
}).catch(function (error) {
    console.log("error1：" + error);
});

p.then((val) => console.log("fulfilled:", val))
  .catch((err) => console.log("rejected", err));

// 等同于
p.then((val) => console.log("fulfilled:", val))
  .then(null, (err) => console.log("rejected:", err));

這個(gè)異常捕獲和java相同,捕獲在eventLoop中產(chǎn)生的異常

注意一點(diǎn)這個(gè)異常和java的try catch是不同的,如果產(chǎn)生了異常將不會在主線程中顯示出來

這個(gè)和java的異常體系相同,finally 無關(guān)狀態(tài),最后都會執(zhí)行

Promise.resolve(2).finally(() => {})

Promise.resolve("foo")
// 等價(jià)于
new Promise(resolve => resolve("foo"))

注意: promise異步化結(jié)果只能在回調(diào)函數(shù)中獲得,如果異步的操作太多,將會調(diào)至調(diào)用鏈路過長

promise 寫法有什么問題? ---- 調(diào)用鏈路過長

比如: 使用promise 實(shí)現(xiàn) 異步ajax請求

var getJSON = function (url, callback) {
    var promise = new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;//readyState屬性的值由一個(gè)值變?yōu)榱硪粋€(gè)值時(shí)，都會觸發(fā)readystatechange事件
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
        function handler() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                callback(this.response);
                resolve(this.response);
            } else {
                reject(new Error(this.statusText))
            }
        };
    });
    return promise;
};
getJSON("./e2e-tests/get.json", function (resp) {
    console.log("get:" + resp.name);
}).then(function (json) {
    getJSON("./e2e-tests/get2.json", function (resp) {
        console.log("get2:" + resp.name);
    })
}).catch(function (error) {
    console.log("error1：" + error);
});

調(diào)用鏈太長,不停的promise調(diào)用

generator:js的特殊語法,使用yield 關(guān)鍵字將函數(shù)分塊了,然后可以使用遍歷器手動控制執(zhí)行

例子:

function * gen(){
    let a= 123;
    let b = yield a;
    let c = yield a+b;
    return a+b+c;
}

let start = gen();

console.log(start.next());
console.log(start.next(2));
console.log(start.next(3));

本質(zhì)上是函數(shù)分片

js在每次yield的時(shí)候都會獲得當(dāng)前位置的表達(dá)式,然后再手動的嵌入就可以實(shí)現(xiàn)分片控制的效果了

看一下這個(gè)方法

function* asyncFn(value) {
    let a = yield promiseOne(value);
    let b = yield promiseTwo(a);
    return a + b;
}

想讓他能異步執(zhí)行,只要能讓前一個(gè)promise的結(jié)果是下一個(gè)promise的輸入就可以了

這里有兩種寫法

遞歸方程: f(最終結(jié)果) = f(到目前的結(jié)果)+f(接下來執(zhí)行的結(jié)果)

function promiseOne(xxx) {
    return new Promise((res, rej) => {
        res(xxx + 1);
    })
}
function promiseTwo(xxx) {
    return new Promise((res, rej) => {
        res(xxx + 1);
    })
}
function* asyncFn(value) {
    let a = yield promiseOne(value);
    let b = yield promiseTwo(a);
    return a + b;
}
function runAsync(fn,value) {
    let item = fn.next(value);
    return new Promise((res, rej) => {
        if (!item.done) {
            if (item.value instanceof Promise) {
                item.value.then((re)=>{
                    runAsync(fn,re).then(res);
                })
            } else {
                runAsync(fn,fn.valueOf()).then(res);
            }
        } else {
            res(item.value);//這個(gè)res方法其實(shí)是所有人的res方法
        }
    })
}
runAsync(asyncFn(12)).then(res=>{
    console.log(res);
});

co 工具包的寫法

function run (gen) {
  gen = gen()
  return next(gen.next())
  function next ({done, value}) {
    return new Promise(resolve => {
     if (done) { // finish
       resolve(value)
     } else { // not yet
       value.then(data => {
         next(gen.next(data)).then(resolve)
       })
     }
   })
  }
}
function getRandom () {
  return new Promise(resolve => {
    setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
  })
}
function * main () {
  let num1 = yield getRandom()
  let num2 = yield getRandom()
 
  return num1 + num2
}
run(main).then(data => {
  console.log(`got data: ${data}`);
})

遞歸方程 f(最終結(jié)果) = f(之前所有的結(jié)果)+f(最后一步的結(jié)果)

//同步方式寫異步
function asyncRun(resf, fn, value) {
    let a = fn(value);
    go(value);
    function go(value) {
        let next = a.next(value);
        if (!next.done) {
            if (next.value instanceof Promise) {
                next.value.then((res) => {
                    go(res);
                });
            } else {
                return go(next.value);
            }
        } else {
            resf(next.value);
        }
    }
}
function* asyncFn(value) {
    let a = yield promiseOne(value);
    let b = yield promiseTwo(a);
    return a + b;
}
function show(item) {
    console.log(item)
}
asyncRun(show, asyncFn, 12);
function promiseOne(xxx) {
    return new Promise((res, rej) => {
        res(xxx + 1);
    })
}
function promiseTwo(xxx) {
    return new Promise((res, rej) => {
        res(xxx + 1);
    })
}

上面復(fù)雜的代碼如果變成async/await要怎么做呢

很簡單

// function* asyncFn(value) {
//     let a = yield promiseOne(value);
//     let b = yield promiseTwo(a);
//     return a + b;
// }
function promiseOne(xxx) {
    return new Promise((res, rej) => {
        res(xxx + 1);
    })
}
function promiseTwo(xxx) {
    return new Promise((res, rej) => {
        res(xxx + 1);
    })
}
async function asyncFn(value) {
    let a = await promiseOne(value);
    let b = await promiseTwo(a);
    return a + b;
}
asyncFn(12).then((res)=>{
    console.log(res)
});

通過上面的例子,我們可以發(fā)現(xiàn)其實(shí)async/await本質(zhì)上其實(shí)是 generator的一個(gè)語法糖

await就是yield , async 的作用就是將函數(shù)編程語法糖

如果背的話很簡答兩條規(guī)則:

await后面必須是promise函數(shù)

async 標(biāo)記過得函數(shù)執(zhí)行后返回的promise

通過這種方法就可以簡單的實(shí)現(xiàn)異步了