Promise,async,await筆記
Promise
創建promise對象
- Promise對象構造方法傳入一個帶有resolve和reject兩個參數的函數function
var promise = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
console.log('異步操作');
}, 2000)
});
promise中resolve,reject
- Promise對象構造方法傳入的function中的resolve,reject參數是用來處理成功或失敗
- Promise對象總共有3中狀態:
- pending: 初始狀態,不是成功或失敗狀態。
- fulfilled: 意味著操作成功完成。(執行resolve狀態會變為fulfilled)
- rejected: 意味著操作失敗。(執行reject狀態會變為rejected)
var promise = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
console.log('成功');
resolve('成功');//fulfilled
} else {
console.log('失敗');
reject('失敗');//rejected
}
}, 2000)
});
promise中then,catch
- Promise實例通過then接受成功(可以連點),catch接收失敗
- promise一次resolve執行會順序觸發promise實例下的所有then方法
- promise中reject,throw Erroe都會promise實例下的所有catch方法
var promise = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('執行成功');
} else {
reject('失敗');
}
}, 2000)
});
//promise實例接受成功和失敗
promise.then(function (data) {
console.log(1);
console.log(data);
}).then(function (data) {
console.log(2);
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會打印:
// 1
// 執行成功
// 2
// 執行成功
兩個promise依賴執行
- promise的then方法默認返回的是自身promise實例(從而實現then的連點),當在then方法中添加return時,return就會根據return來變化
現有一個這樣的業務場景需要先調接口A獲取用戶信息,再根據接口A返回的數據調用接口B,兩個接口存在依賴
var promise1 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口A');
} else {
reject('失敗');
}
}, 2000)
});
//promise實例接受成功和失敗
promise1.then(function (data) {
console.log('接口A執行');
console.log(data);
var promise2 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口B');
} else {
reject('失敗');
}
}, 1500)
});
return promise2;
}).then(function (data) {
console.log('接口B執行');
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會打印:
// 接口A執行
// 接口A
// 接口B執行
// 接口B
兩個promise順序執行
- promise的then方法默認返回的是自身promise實例(從而實現then的連點),當在then方法中添加return時,return就會根據return來變化
現有一個這樣的業務場景需要先調接口A和接口B獲取數據,根據結果A返回數據取處理結果B返回的數據,兩個接口不存在依賴,但是存在順序
- 以下demo雖然接口B會比接口A早返回數據但是promise可以實現異步順序處理
var promise1 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口A執行成功');
} else {
reject('失敗');
}
}, 2000)
});
var promise2 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('接口B執行成功');
} else {
reject('失敗');
}
}, 1500)
});
//promise實例接受成功和失敗
promise1.then(function (data) {
console.log(1);
console.log(data);
return promise2;
}).then(function (data) {
console.log(2);
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會打印:
// 1
// 接口A執行成功
// 2
// 接口B執行成功
Promise.all方法
- all方法是Promise類下的靜態方法,用于處理多個promise執行合并
現有一個這樣的業務場景渲染需要接口A和接口B數據,兩個接口不存在依賴,也不存在順序
var promise1 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise1執行成功');
} else {
reject('失敗');
}
}, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise2執行成功');
} else {
reject('失敗');
}
}, 2000)
});
Promise.all([promise1,promise2]).then(function (datas) {
console.log(datas[0]);
console.log(datas[1]);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會打印:
// promise1執行成功
// promise2執行成功
Promise.race方法
- race方法是Promise類下的靜態方法,用于處理多個promise競速
現有一個這樣的業務場景需要接口A或者接口B的數據,兩個接口不存在依賴,也不存在順序,誰先返回我就用誰的數據
var promise1 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise1執行成功');
} else {
reject('失敗');
}
}, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
//方法體內執行異步操作如:文件讀寫ajax之類
setTimeout(function () {
let success = true;
if (success) {
resolve('promise2執行成功');
} else {
reject('失敗');
}
}, 2000)
});
Promise.race([promise1,promise2]).then(function (data) {
console.log(data);
}).catch(function (err) {
console.log(err);
});
// 上述代碼會打印:
// promise1執行成功
async/await
- async關鍵字申明的該方法是一個異步方法,申明方法中的await申明的promise對象都會轉換為同步
- await關鍵字阻塞promise對象使promise變為同步
- await只能在async關鍵字申明的異步方法中使用
- await等待的雖然是promise對象,但不必寫.then(),直接可以得到resolve的返回值。
- 捕獲錯誤用try catch
function asyncfun(time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
let success = true;
if (success) {
resolve('成功');
} else {
reject('失敗');
}
}, time);
});
}
/**
* 使用async,await
*/
let load = async function() {
console.log('開始');
try {
//直接可以得到resolve的返回值。
let succ = await asyncfun(2000);
console.log('2000'+succ);
let succ1 = await asyncfun(1500);
console.log('1500'+succ1);
} catch (err) {
//直接可以得到reject的返回值。
console.log(err);
}
console.log('結束');
};
load();