promise這個東西，我都不知道見過多少回了！，非常重要，這里在回憶一遍
發現問題
const fs = require('fs')
fs.readFile('./data/1.txt', (err, data) => {
console.log(111)
fs.readFile('./data/2.txt', (err, data) => {
console.log(222)
fs.readFile('./data/3.txt', (err, data) => {
console.log(333)
})
})
})
// Promise
使用promise
/**
* Promise 在 Ecmascript 6 中體現出來就是一個物件
* Promise 是一個容器
* 一般用來封裝一個異步操作
* 異步操作是一個無法預測的事情，要嗎成功，要嗎失敗
* 容器內部有三種狀態：
* pending 正在處理
* resolved 成功，已解決
* rejected 駁回，失敗
*/
const fs = require('fs')
// Promise 物件一經創建，立即執行
new Promise((resolve, reject) => {
fs.readFile('./data/2.txt', (err, data) => {
if (err) {
// 當 Promise 物件內部的異步操作結果失敗的時候，告訴 Promise 物件容器，該異步任務失敗了
// 其實就是將 Promise 內部的 Pending 狀態改為 Rejected
reject(err)
}
// 當代碼執行到這里，說明該 Promise 物件內部的異步操作沒有錯誤發生，證明成功了
// 然后在這里將 Promise 內部的 Pending 狀態改為 Resolved
resolve(data)
})
})
// Promise 實體物件有一個方法：then 方法
// then 需要傳遞兩個回呼處理函式
// 其中第一個回呼處理函式就是 Promise 物件內部的 resolve 函式
// 第二個回呼處理函式是可選的，如果傳遞則就是 Promise 物件內部的 reject 函式
.then((data) => {
console.log(111)
console.log(data.toString())
return new Promise((resolve, reject) => {
fs.readFile('./data/3.txt', (err, data) => {
if (err) {
// 這里沒有使用 return 的原因就是 Promise 的狀態只能從 Pending 變為 Resolve 或者 Rejected
// 狀態一旦改變，就不會再發生變化
reject(err)
}
resolve(data)
})
})
}, (err) => {
console.log('讀取檔案失敗了')
})
// then 方法之后可以繼續鏈式呼叫 then
// 后續的每一個 then 中指定的回呼處理函式都會被執行
// 后續的 then 中指定的回呼處理函式可以接收上一個 then 中指定的成功的回呼處理函式的回傳結果
// 1. 沒有回傳值，默認就是 undefined
// 2. 有普通的回傳值，數字、字串、物件、陣列，，，
// 3. 回傳一個新的 Promise 物件
.then((data) => {
console.log(222)
console.log(data.toString())
return new Promise((resolve, reject) => {
fs.readFile('./data/1.txt', (err, data) => {
if (err) {
// 這里沒有使用 return 的原因就是 Promise 的狀態只能從 Pending 變為 Resolve 或者 Rejected
// 狀態一旦改變，就不會再發生變化
reject(err)
}
resolve(data)
})
})
})
.then((data) => {
console.log(333)
// 二進制資料呼叫 toString() 方法可以轉換為普通的字符，默認就是 utf8 編碼
console.log(data.toString())
})
封裝promise
const fs = require('fs')
readFile('./data/1.txt', 'utf8')
.then(data =https://www.cnblogs.com/ygjzs/p/> {
console.log(data)
return readFile('./data/2.txt', 'utf8')
})
.then(data =https://www.cnblogs.com/ygjzs/p/> {
console.log(data)
return readFile('./data/3.txt', 'utf8')
})
.then(data =https://www.cnblogs.com/ygjzs/p/> {
console.log(data)
})
function readFile(...args) {
return new Promise((resolve, reject) => {
fs.readFile(...args, (err, data) => {
if (err) {
reject(err)
}
resolve(data)
})
})
}
html頁面中promise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest - Promise</title>
</head>
<body>
<div>
姓名：
年齡：
</div>
<script>
function xhr(options) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest()
xhr.open(options.type || 'get', options.url)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.responseText)
} else {
reject()
}
}
xhr.send()
})
}
xhr({
url: '',
type: '',
data: ''
})
.then(data =https://www.cnblogs.com/ygjzs/p/> {
return xhr({
})
})
.then(data => {
// 做渲染處理
})
$.ajax({
}).then(data => {
return $.ajax({
})
})
.then(data => {
})
</script>