## analyse de promesse
*Qu'est-ce que l'asynchrone ?
//异步执行
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. Processus et fil
####a. Concept et différence
####b. Questions d'entretien
* Mappage sur le navigateur frontal
Chrome ouvre une nouvelle fenêtre, est-ce un processus ou un fil (peut être compris comme une coopération mutuelle, indépendante les uns des autres) ? => processus (peut être compris comme un système indépendant complet)
* diverger
Sens 1 : Fenêtre de communication (inter-processus) ?=>stockage | cookie=>La différence entre plusieurs stockages=>Scénario d'application=>Reprise de projet combinée
Orientation 2 : Principe du navigateur (les entretiens pour les postes intermédiaires et seniors le sont majoritairement)
###2.EVENT-LOOP
####a. Pile d'exécution
* JS langage monothread, exécution en une seule étape
function func2() {
throw new Error('please check your call stack');
}
function func1() {
func2()
}
function func() {
func1()
}
func()####b. Questions d'entretien
// 执行顺序
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
//同步 | 异步
event-table : peut être compris comme asynchrone à exécuter
file d'attente d'événements : file d'attente asynchrone
Parcourir de manière synchrone la pile d'exécution synchrone et parcourir de manière asynchrone la file d'attente d'événements asynchrones.
###promiseisation => chaînage
#### a. Théorie : l'enfer des rappels
request.onreadystatechange = () => {
//回调后处理
}
//加时延
setTimeout(() => {
request.onreadystatechange = () => {
//回调后处理
setTimeout(() => {
//处理
request.onreadystatechange = () => {
//......
}
});
}
});
//promise化
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
});
}).then(res => {
request()
}).catch(err => {
console.log(err);
})Plusieurs exécutions séquentielles asynchrones => appels de chaîne composés
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. Interview-promesse
*1. Statut de la promesse – envoi | rempli | rejeté
Exécuteur (exécuteur) : Exécuter immédiatement lorsqu'une nouvelle promesse est reçue, recevoir deux paramètres, résoudre | rejeté
*2. L'état par défaut de la promesse ? Comment l'état s'écoule-t-il ? - La valeur par défaut est pedding, flux d'état : pedding=>fulfilled | pedding=>rejected
Valeur de réussite de la maintenance interne : underfined | thenable | promise
Raison de l'échec de la maintenance interne
*3.valeur de retour de promesse ? -then méthode : recevoir onFulfilled et onRejected
Si alors, la promesse a réussi, exécutez onFulfilled, valeur du paramètre
Si alors, la promesse a échoué, exécutez onRejected, paramètre resaon
S'il y a une exception dans then, exécutez onRejected
*Suivi : écrit à la main ?
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)
})
}
}
}