Promise / generator / async / await 整理
阿新 • • 發佈：2018-12-10
Promise
主要是用來解決非同步操作。
- 同步：序列 簡單，方便
- 非同步：並行 效能高，體驗好
這是 promise 的基本用法
let p = new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
})
} 當有好幾個非同步請求時，可以使用promise.all
let p = new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json){
resolve(json);
},
error 這樣寫很麻煩，可以簡化一下
Promise.all([
$.ajax({url: '1.txt', dataType: 'json'}),
$.ajax({url: '2.txt', dataType: 'json'}),
$.ajax({url: '3.json', dataType: 'json'}),
]).then(arr=>{
let [a, b, c] = arr;
console.log('成功',a,b,b);
}, err=>{
console.log('獲取失敗');
})
還有一個方法是Promise.race，寫法和Promise.all差不多，不過他的意思是隻要有一個請求成功就進行下一步，所以相應的返回值也不會是陣列了，而是那個最先返回的結果。不常用。
但工作中會遇到一種情況是多個請求巢狀，第二個請求需要用到第一個請求成功返回的值作為引數，我看的教程中提到不能這樣做，並且提到之後的generator會幫忙解決，但之後好像見過，就試著寫了下，可能有不完善的地方，暫時看能滿足需求。當第一個請求失敗的時候便不會繼續執行了，並且1中的返回的資料被用作下一個 then 中函式的引數。
執行這個程式的話需要用到伺服器，mac 上我用的 XAMPP ，1.txt 和 2.txt 裡面的都是 json 資料。 總結一下，只有當執行到 resolve 的時候才會去執行 then 中的，resolve 括號中的會作為下一個的then 中函式的引數。
如果 then 中返回的是普通變數，那麼 return 的值就會作為先一個 then 的引數，如果 then 中是一個 Promise，那麼 resolve 的括號中的值就作為引數。
<!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="jquery.js" charset="utf-8"></script>
<script>
new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json1) {
console.log('json1', json1);
var sum1 = [json1];
console.log('sum1:', sum1);
resolve(json1);
}
})
}).then(json1 => {
return new Promise((resolve, reject) => {
$.ajax({
url: '2.txt',
dataType: 'json',
success(json2) {
console.log('上一個請求傳過來的引數：', json1);
var sum2 = [json1, json2];
console.log('sum2:', sum2);
}
})
})
})
</script>
</head>
<body>
</body>
</html>
generator
中間可以暫停，用 yield 來暫停，yield 只能用在 generator 函式中。
執行 generator 函式與普通函式有點區別，如下，執行 show 函式時會返回一個 generator 物件，當我們呼叫 next 的時候才會往下開始執行，直到 yield，再呼叫 next 再往下執行
function* show() {
console.log('第一步');
yield;
console.log('第二步');
}
let go = show();
go.next();
console.log('第一步和第二步中間的');
go.next();
// 開始了嗎
// 第一步
// 第一步和第二步中間的
// 第二步
yield 還可以用來傳值，如下
function* show() {
console.log('第一步');
let a = yield;
console.log('第二步',a);
}
let go = show();
go.next();
go.next(12);
// 第一步
// 第二步 12
yield 還可以有返回值，如下
function* show() {
console.log('第一步');
let a = yield '返回值';
console.log('第二步',a);
return 100;
}
let go = show();
let res1 = go.next();
console.log(res1);
let res2 = go.next(12);
console.log(res2);
// 第一步
// { value: '返回值', done: false }
// 第二步 12
// { value: 100, done: true }
但實際使用中，由於 generator 有各種問題，很快被 async/await 取代了，所以不需要太瞭解。
async/await
js 中解決非同步操作的終極方案
同樣的需求，就是等待第一個請求成功返回後再去請求第二個，看程式碼吧.
<!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="jquery.js"></script>
<script>
(async () => {
let a = await $.ajax({url: '1.txt',dataType: 'json'});
let b = await $.ajax({url: `${a.a}.txt`,dataType: 'json'});
let c = await $.ajax({url: '3.json',dataType: 'json'});
console.log(a,b,c);
})()
</script>
</head>
<body>
</body>
</html>
當然，我們最好在請求的外邊套一層 try/catch ，來處理異常
<!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="jquery.js"></script>
<script>
async function test() {
try{
let a = await $.ajax({url: '1.txt',dataType: 'json'});
let b = await $.ajax({url: `${a.b}.txt`,dataType: 'json'});
let c = await $.ajax({url: '3.json',dataType: 'json'});
console.log(a,b,c);
}catch(e) {
console.log('資料請求錯誤');
throw new Error('錯誤');
}
}
test();
</script>
</head>
<body>
</body>
</html>