предисловие
По темам, организованным курсом «Быстро освоить фронтенд-технологию и соответствовать требованиям собеседования на большом заводе» МООК
Часто задаваемые вопросы
Если вы чувствуете, что почти овладели знаниями об асинхронности, вы можете перейти к предыдущему и сразу перейти к нижней части, чтобы просмотреть вопросы сцены интервью.
1. В чем разница между синхронным и асинхронным?
Асинхронный: не блокирует выполнение кода
Синхронный: будет блокировать выполнение кода
Синхронная и асинхронная разница в том, что разный порядок выполнения процессов на этой линии.
- Синхронные задачи относятся к задачам, поставленным в очередь для выполнения в основном потоке, и последняя задача может быть выполнена только после выполнения предыдущей задачи; асинхронные задачи относятся к задачам, которые не входят в основной поток, но входят в «очередь задач» (очередь задач). ) Задача, только когда выполняется задача основного потока, «очередь задач» начинает уведомлять основной поток и запрашивать выполнение задачи, задача войдет в основной поток для выполнения.
2. Рукописные обещания
function myPromise(fn) {
// 回调函数集合
this.callbacks = []
// resolve 方法
// 往实例上挂载 data
// 依次执行回调函数
function resolve(value) {
setTimeout(() => {
this.data = value;
this.callbacks.forEach((callback) => callback(value));
});
}
// 将 resolve 方法交还
fn(resolve.bind(this));
}
myPromise.prototype.then = function (onResolve) {
return new myPromise((resolve) => {
this.callbacks.push(() => {
// 将结果返回给传入的回调
const res = onResolve(this.data);
// 链式调用 的返回值还是 Promise 对象时
if (res instanceof myPromise) {
res.then(resolve);
} else {
resolve(res);
}
});
});
};
3. Рукописный ввод с обещанием загрузить картинку
function loadImg(src) {
const p = new Promise(
( resolve , reject ) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error(`图片加载失败${src}`))
}
img.src = src
}
)
return p
}
const url = 'xxx'
loadImg(url).then( img => {
console.log(img.width)
return img
} ).then( img => {
console.log(img.height)
} ).catch( ex => console.error(ex) )
4. В каких сценариях интерфейс использует асинхронность?
- ①Сетевой запрос, загрузка изображения ajax
- ② Временные задачи, setTimeout
5. Предыстория и асинхронный механизм асинхронной генерации
Асинхронно генерируемый фон
- ①JS — это однопоточный язык, который одновременно может выполнять только одно действие.
- ②До того, как не будет асинхронности, он зависнет, когда столкнется с ожиданием (сетевой запрос, задание по времени)
- ③ Синхронизация заблокирует выполнение кода
Асинхронный механизм
- В форме функции обратного вызова (но это приведет к созданию плохого кода, а способ, которым обратные вызовы выражают асинхронные процессы, является нелинейным и непоследовательным, что очень затрудняет правильное получение такого кода. Трудный для понимания код — это плохой код, что приведет к ошибке в плохом коде, это также вызовет проблему ада обратных вызовов, на которую все обычно ссылаются)
6. Предыстория и роль обещания
Ад обратного вызова (асинхронный асинхронный вызов) ад обратного вызова, поэтому генерируется обещание
- Функция: Promise переводит URL в невложенный режим, преобразует его в форму конвейера и становится конвейерной передачей.Если он напрямую запрашивается ajax, если есть большой файл, то страница будет зависать и ждать тот. Запрос данных выполнен успешно
- цикл событий - это принцип реализации асинхронного обратного вызова
7. Пожалуйста, опишите механизм событийного цикла
Событие — это принцип реализации асинхронного обратного вызова.
- ① Синхронный код, построчно выполняется в стеке вызовов
- ②При обнаружении асинхронности сначала
记录вниз, подождите время - ③ Когда время истечет, перейдите в очередь обратного вызова
- ④ Если вызов satck пуст (выполняется синхронный код), после простоя выполнить микрозадачи и попробовать рендеринг DOM
- ⑤ Цикл событий начинает работать и выполняет задачу макроса
- ⑥ Опрос, чтобы найти очередь обратного вызова, если есть задача, перейти в стек вызовов для выполнения
- ⑦Продолжайте опрос, чтобы найти
8. Что такое макрозадачи и микрозадачи? Какая разница между двумя?
Задача макроса: запускается после рендеринга DOM, например, setTimeout
- сценарий (общий код), setTimeout, setInterval, setImmediate, ввод-вывод, рендеринг пользовательского интерфейса, Ajax, события DOM
Микрозадачи: запускаются перед рендерингом DOM, например Promise.
- обещание, наблюдение за объектом, наблюдение за мутацией, асинхронное/ожидание
Приоритет задачи: process.nextTick > promise.then > setTimeout > setImmediate
Как понять взаимосвязь между макрозащитами и обработкой микро задачей?
- Я помню, что видел пример, описанный ранее, который легче понять: точно так же, как те, кто идет в банк, чтобы встать в очередь по делу, продавец в кассе — однопоточный js, а все, кто приходит в очередь, — макрозадача, и каждый будет заниматься несколькими делами, каждое дело представляет собой микрозадачу, то есть каждая макрозадача содержит несколько микрозадач, которые нужно выполнять одну за другой. То есть только после обработки всех текущих микрозадач начнется следующая макрозадача.
9. Каковы три состояния обетования? как изменить
три состояния
- в ожидании
- выполнено решено (успешно)
- отклонено отклонено (не удалось)
- Как только обещание разрешено или отклонено, оно не может перейти в какое-либо другое состояние (т. е. в неизменное состояние).(Яма будет закопана здесь в вопросах сцены интервью)
Как это меняется?
- потом возвращает отработал нормально
- catch вернется выполненным нормально
- Возврат отклонен, если есть ошибка
- разрешенные триггеры после этого
- отклонено вызывает последующий захват
10. Простое понимание async/await
- Вызовы Promise then и catch фактически основаны на функциях обратного вызова.
- А async/await — это синхронный синтаксис, полностью исключающий callback-функцию.
- Async/await и обещание не исключают друг друга, а дополняют друг друга.
- Выполните асинхронную функцию и верните объект Promise, ожидание эквивалентно обещанию, тогда попытка и перехват могут перехватывать исключения, а не перехват обещания.
- Async/await это просто синтаксис, по сути JS или single thread, или асинхронный, или основанный на Event Loop, но этот сахар пахнет
11. Различные интервью асинхронной сцены
Ниже приведены различные вопросы, связанные с асинхронной сценой, вы можете сделать это, а затем проведите пальцем влево, чтобы просмотреть ответы в комментариях.
1.setTimeout
console.log(1)
setTimeout( function () {
console.log(2)
} , 1000 )
console.log(3)
setTimeout( function () {
console.log(4)
} , 0 )
console.log(5)
// 1 3 5 4 2
2. Состояние обещания (1)
Promise.resolve()
.then( () => {
console.log(1)
throw new Error('error1') // 排出错误，状态变为rejected
} ).catch( () => { // rejected状态触发catch
console.log(2)
} ).then( () => { // catch返回fulfilled状态，再触发then
console.log(3)
} )
// 1 2 3
3. Состояние обещания (2)
Promise.resolve()
.then( () => {
console.log(1)
throw new Error('error1')
} ).catch( () => {
console.log(2)
} ).catch( () => {
console.log(3)
} )
// 1 2
4. Состояние обещания (3)
Promise.resolve()
.then( () => {
console.log(1)
} ).catch( () => { // fulfilled状态不触发catch
console.log(2)
} ).then( () => {
console.log(3)
} )
// 1 3
5. Микрозадачи и макрозадачи
console.log(100)
setTimeout( () => {
console.log(200)
} ) // 宏任务
Promise.resolve().then( () => {
console.log(300)
} ) // 微任务
console.log(400)
// 100 400 300 200
// 微任务执行时机比宏任务早
Если вы правильно ответили на все вышеперечисленные вопросы, то ваше понимание промисов почти такое же, тогда давайте взглянем на async/await
6. асинхронный/ожидание (1)
(async function () {
console.log('start')
const a = await 100
console.log('a:',a)
const b = await Promise.resolve(200)
console.log('b:',b)
const c = await Promise.reject(300)
console.log('c:',c)
console.log('end')
})()
// start
// a 100
// b 200
// 报错
7. асинхронный/ожидание (2)
async function async1() {
console.log('async1 start')
await async2()
// await 的后面，都可以看作是 callback 里的内容，即异步
console.log('async1 end') // 异步内容先不执行，放到一边，先执行完同步内容再回来执行异步 5
}
async function async2() {
console.log('async2')
}
console.log('script start')
async1()
console.log('script end')
// script start、async1 start、async2、script end、async1 end
8. асинхронный/ожидание (3)
async function async1() {
console.log('async1 start')
await async2()
// 下面都是异步回调
console.log('async1 end')
await async3()
console.log('async1 end 2')
}
async function async2() {
console.log('async2')
}
async function async3() {
console.log('async3')
}
console.log('script start')
async1()
console.log('script end')
// script start、async1 start、async2、script end、async1 end、async3、async1 end 2、
9. Идеальная комбинация вопросов для сценического интервью (я слышал, что это был первоначальный вопрос сегодняшнего главного интервью)
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout( function () {
console.log('setTimeout')
} , 0 )
async1()
new Promise ( function (resolve) {
console.log('promise1')
resolve()
} ).then( function () {
console.log('promise2')
} )
console.log('script end')
//script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout、
Если вы правильно ответили на этот вопрос, значит, вы почти овладели знаниями об этом асинхронном аспекте.
напиши в конце
Если вы считаете, что я пишу неплохо, вы можете поставить мне лайк ^^, если что-то не так или плохо, пожалуйста, прокомментируйте и укажите на это, чтобы я мог исправить.
Другие статьи
- Базовые знания о внешнем интерфейсе ②—— Объем и закрытие (вопросы сцены интервью)
- Базовые знания о внешнем интерфейсе ①——CSS-вопросы на собеседовании
- Обход бинарного дерева структуры данных
- Резюме обучающего видеоролика проекта Imitation Qunar
- Webpack прост в освоении
- Серия глютена ① - односторонние вопросы интервью DiDi SP
- Серия глютена ②—— Стажеры DiDi
В этой статье используетсяmdniceнабор текста