##promise解析
※非同期とは何ですか？
//异步执行
let count = 1
let timer = setTimeout(function () {
count++
console.log('in', count);
}, 1000);
console.log('out');
// out=>1000=>in
//循环执行
let count = 1
let timer = setInterval(function () {
count++
console.log('in', count);
}, 1000);
console.log('out');
setTimeout(function () {
clearInterval(timer)
console.log('clear');//第5秒后清空循环器
}, 5000);
//看不见的队列,存放着需要默默执行的命令###1. プロセスとスレッド
####a. コンセプトと違い
####b. 面接での質問
* フロントエンドブラウザへのマッピング
Chrome は新しいウィンドウを開きますが、それはプロセスですか、それともスレッド (互いに独立した相互協力として理解できます)? => プロセス (完全に独立したシステムとして理解できます)
* 分岐する
方向 1: ウィンドウ (プロセス間) 通信?=> ストレージ | cookie=> 複数のストレージの違い=> アプリケーション シナリオ => 結合された再開プロジェクト
方向性２：ブラウザ主義（中堅以上の面接が中心）
###2.イベントループ
####a. 実行スタック
*js シングルスレッド言語、シングルステップ実行
function func2() {
throw new Error('please check your call stack');
}
function func1() {
func2()
}
function func() {
func1()
}
func()####b. 面接での質問
// 执行顺序
setTimeout(() => {
console.log('count');//5.宏任务2
}, 0);
new Promise(resolve => {
console.log('new Promise');//1.属于同步进入主线程 宏任务1
resolve()
}).then(() => {
console.log('Promise then');//3.微任务1
}).then(() => {
console.log('Promise then then');//4.微任务2
})
console.log('hi');//2.同步+宏任务1
//任务拆分 : macro | micro
//同步 | 异步
イベントテーブル: 非同期で実行されるものとして理解できます。
イベントキュー: 非同期キュー
同期実行スタックを同期的にウォークし、非同期イベント キューを非同期的にウォークします。
###約束化 => 連鎖
#### a. 理論 - コールバック地獄
request.onreadystatechange = () => {
//回调后处理
}
//加时延
setTimeout(() => {
request.onreadystatechange = () => {
//回调后处理
setTimeout(() => {
//处理
request.onreadystatechange = () => {
//......
}
});
}
});
//promise化
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
});
}).then(res => {
request()
}).catch(err => {
console.log(err);
})複数の非同期順次実行 => 複合チェーン呼び出し
function wait500(input) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(input + 500)
}, 500);
})
}
function wait1000(input) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(input + 1000)
}, 1000);
})
}
const p = new Promise((resolve, reject) => {
resolve(1)
})
p.then(wait500)
.then(wait1000)
.then(wait500)
.then(wait1000)
.then(res => {
console.log('end', res);
})
//全部执行完成回调
Promise.all([wait500, wait1000]).then(res => {
console.log('all end', res);
})
//有执行完成的立刻操作
Promise.race()([wait500, wait1000]).then(res => {
console.log('all end', res);
})####b. 面接の約束
*1. 約束ステータス - 保留中 | 履行済み | 拒否
Executor (エグゼキュータ): 新しい Promise を受信したらすぐに実行、2 つのパラメータを受け取り、解決 | 拒否
*2. Promise のデフォルトの状態はどのようになりますか? - デフォルトは pedding、状態の流れ: pedding=>fulfilled | pedding=>rejected
内部メンテナンスの成功値: アンダーファイン | その後可能 | 約束
内部メンテナンス失敗理由理由
*3.promise 戻り値? -thenメソッド:onFulfilledとonRejectedを受け取る
その後、Promise が成功した場合は、onFulfilled、パラメータ値を実行します。
その後、Promise が失敗した場合は、onRejected、パラメータ resaon を実行します。
then で例外が発生した場合は、onRejected を実行します
※追記：手書き？
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class Promise {
constructor(executor) {
//1.默认状态-PENDING
this.status = 'PENDING'
//2.内部维护的变量值
this.value = undefined
this.reason = undefined
//成功的回调
let resolve = value => {
//状态流转
this.status = FULFILLED
this.value = value
}
//失败的回调
let reason = reason => {
//状态流转
this.status = REJECTED
this.reason = reason
}
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
then(onFulfilled, onRejected) {
if (this.status === FULFILLED) {
onFulfilled(this.value)
}
if (this.status === REJECTED) {
onFulfilled(this.reason)
}
}
}
//异步怎么办?
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class Promise {
constructor(executor) {
//1.默认状态-PENDING
this.status = 'PENDING'
//2.内部维护的变量值
this.value = undefined
this.reason = undefined
//存放回调
this.onResolvedCallbacks = []
this.onRejectedCallbacks = []
//成功的回调
let resolve = value => {
//状态流转
this.status = FULFILLED
this.value = value
this.onResolvedCallbacks.forEach(fn => fn())
}
//失败的回调
let reason = reason => {
//状态流转
this.status = REJECTED
this.reason = reason
this.onRejectedCallbacks.forEach(fn => fn())
}
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
then(onFulfilled, onRejected) {
if (this.status === FULFILLED) {
onFulfilled(this.value)
}
if (this.status === REJECTED) {
onFulfilled(this.reason)
}
if (this.status === PENDING) {
//存放队列
this.onResolvedCallbacks.push(() => {
onFulfilled(this.value)
})
this.onRejectedCallbacks.push(() => {
onFulfilled(this.reason)
})
}
}
}