一、Promise是什么？
Promise是異步編程的一種解決方案。
二、那什么時候我們會來處理異步事件呢？
1、 一種很常見的場景應該就是網絡請求了。
我們封裝一個網絡請求的函數，因為不能立即拿到結果，所以不能像簡單的3+4=7一樣將結果返回。所以往往我們會傳入另外一個函數，在數據請求成功時，將數據通過傳入的函數回調出去。如果只是一個簡單的網絡請求，那么這種方案不會給我們帶來很大的麻煩。
三、基本使用
01-Promise的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 什么情況下會用到Promise?
// 一般情況下是有異步操作時,使用Promise對這個異步操作進行封裝
// new -> 構造函數(1.保存了一些狀態信息 2.執行傳入的函數)
// 在執行傳入的回調函數時, 會傳入兩個參數, resolve, reject.本身又是函數
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功的時候調用resolve
// resolve('Hello World')
// 失敗的時候調用reject
reject('error message')
}, 1000)
}).then((data) => {
// 1.100行的處理代碼
console.log(data);
}).catch((err) => {
console.log(err);
})
</script>
</body>
</html>
02-Promise的另外處理形式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello Vuejs')
//reject('error message')
}, 1000)
}).then(data => {
console.log(data);
}, err => {
console.log(err);
})
</script>
</body>
</html>
四、鏈式調用
03-Promise的鏈式調用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 參數 -> 函數(resolve, reject)
// resolve, reject本身它們又是函數
// 鏈式編程
new Promise((resolve, reject) => {
// 第一次網絡請求的代碼
setTimeout(() => {
resolve("hello")
}, 1000)
}).then(data => {
// 第一次拿到結果的處理代碼
console.log(data);
return data + '1111';
}).then(data => {
// 第二次處理的代碼
console.log(data);
return data + '2222'
}).then(data => {
// 第三處理的代碼
console.log(data);
})
</script>
</body>
</html>
推薦一個適合零基礎學習SQL的網站： 不用安裝數據庫，在線輕松學習SQL！