1. Введение
Привет всем, яВакагава.Чтобы помочь большему количеству студентов, которые интересуются исходным кодом, хотят научиться читать исходный код и улучшить свои технические возможности интерфейса.. Я изо всех сил старался организоватьЧтение исходного кода, если вам интересно, вы можете добавить меня в WeChatruochuan12участвовать. Каждую неделю все изучают около 200 строк исходного кода и вместе делают успехи.Прошло 4 месяца, и многие говорят, что они много наработали.
Если вы хотите изучить исходный код, настоятельно рекомендую обратить внимание на написанную мной колонку (на данный момент подписано 1,9 тыс. человек)"Изучение серии "Общая архитектура исходного кода""ВключатьjQuery,underscore,lodash,vuex,sentry,axios,redux,koa,vue-devtools,vuex4,koa-compose,vue 3.2 发布,vue-this,create-vue,玩具viteБолее 20 статей исходного кода.
Этот склад статей https://github.com/lxchuan12/delay-analysis.git, попросите звезду ^_^
Чтение исходного кодаКаждую неделю проводился 17-й период. Поэтому ищите разнообразный исходный код, который стоит изучить и содержит небольшое количество строк кода.Основной файл задержки составляет всего более 70 строк., это стоит нашего изучения.
Прочитав эту статью, вы узнаете:
1. 学会如何实现一个比较完善的 delay 函数
2. 学会使用 AbortController 实现取消功能
3. 学会面试常考 axios 取消功能实现
4. 等等
2. Подготовка окружающей среды
# 推荐克隆我的项目，保证与文章同步
git clone https://github.com/lxchuan12/delay-analysis.git
# npm i -g yarn
cd delay-analysis/delay && yarn i
# VSCode 直接打开当前项目
# code .
# 我写的例子都在 examples 这个文件夹中，可以启动服务本地查看调试
# 在 delay-analysis 目录下
npx http-server examples
# 打开 http://localhost:8080
# 或者克隆官方项目
git clone https://github.com/sindresorhus/delay.git
# npm i -g yarn
cd delay && yarn i
# VSCode 直接打开当前项目
# code .
3. delay
Мы начинаем с нуля, чтобы достичь более полногофункция задержки.
3.1 Задержка короткого выпуска первого выпуска
Для завершения такой функции задержки.
3.1.1 Использование
(async() => {
await delay1(1000);
console.log('输出这句');
})();
3.1.2 Реализация
использоватьPromiseа такжеsetTimeoutВ сочетании с реализацией мы можем легко реализовать следующий код.
const delay1 = (ms) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, ms);
});
}
Мы хотим передать результат.
3.2 Вторая редакция Передача параметра value в качестве результата
3.2.1 Использование
(async() => {
const result = await delay2(1000, { value: '我是若川' });
console.log('输出结果', result);
})();
Мы также можем легко реализовать следующий код. передачаvalueНаконец вернулся как результат.
3.2.2 Реализация
Поэтому мы осознаем также очень легко реализовать как второе издание.
const delay2 = (ms, { value } = {}) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value);
}, ms);
});
}
Пишите так,PromiseБудь всегда успешным. Нам тоже нужно потерпеть неудачу. Затем мы определяем параметрwillResolveопределять.
3.3 v3 Параметр willResolve определяет успех или неудачу.
3.3.1 Использование
(async() => {
try{
const result = await delay3(1000, { value: '我是若川', willResolve: false });
console.log('永远不会输出这句');
}
catch(err){
console.log('输出结果', err);
}
})();
3.3.2 Реализация
добавитьwillResolveПараметр определяет успех или неудачу. Итак, у нас есть следующая реализация.
const delay3 = (ms, {value, willResolve} = {}) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(willResolve){
resolve(value);
}
else{
reject(value);
}
}, ms);
});
}
3.4 Четвертая редакция Случайное получение результатов в течение определенного периода времени
Миллисекунды таймера задержки жестко закодированы. Мы хотим иметь возможность получать результаты случайным образом в течение определенного периода времени.
3.4.1 Использование
(async() => {
try{
const result = await delay4.reject(1000, { value: '我是若川', willResolve: false });
console.log('永远不会输出这句');
}
catch(err){
console.log('输出结果', err);
}
const result2 = await delay4.range(10, 20000, { value: '我是若川，range' });
console.log('输出结果', result2);
})();
3.4.2 Реализация
мы добиваемся успехаdelayи потерпеть неудачуrejectИнкапсулированный в функцию, случайныйrangeИнкапсулируется как отдельная функция.
const randomInteger = (minimum, maximum) => Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
const createDelay = ({willResolve}) => (ms, {value} = {}) => {
return new Promise((relove, reject) => {
setTimeout(() => {
if(willResolve){
relove(value);
}
else{
reject(value);
}
}, ms);
});
}
const createWithTimers = () => {
const delay = createDelay({willResolve: true});
delay.reject = createDelay({willResolve: false});
delay.range = (minimum, maximum, options) => delay(randomInteger(minimum, maximum), options);
return delay;
}
const delay4 = createWithTimers();
На данный момент он относительно завершен. Но, возможно, нам придется закончить раньше.
3.5 Ранняя очистка пятого издания
3.5.1 Использование
(async () => {
const delayedPromise = delay5(1000, {value: '我是若川'});
setTimeout(() => {
delayedPromise.clear();
}, 300);
// 300 milliseconds later
console.log(await delayedPromise);
//=> '我是若川'
})();
3.5.2 Реализация
утверждениеsettleпеременная, инкапсуляцияsettleфункция, вызовdelayPromise.clearвремя, чтобы очистить таймер. Таким образом, мы можем получить код пятой редакции следующим образом.
const randomInteger = (minimum, maximum) => Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
const createDelay = ({willResolve}) => (ms, {value} = {}) => {
let timeoutId;
let settle;
const delayPromise = new Promise((resolve, reject) => {
settle = () => {
if(willResolve){
resolve(value);
}
else{
reject(value);
}
}
timeoutId = setTimeout(settle, ms);
});
delayPromise.clear = () => {
clearTimeout(timeoutId);
timeoutId = null;
settle();
};
return delayPromise;
}
const createWithTimers = () => {
const delay = createDelay({willResolve: true});
delay.reject = createDelay({willResolve: false});
delay.range = (minimum, maximum, options) => delay(randomInteger(minimum, maximum), options);
return delay;
}
const delay5 = createWithTimers();
3.6 Функция отмены шестого издания
Мы можем проверить информацию, чтобы узнать, что существует AbortController, который может реализовать функцию отмены.
yet-another-abortcontroller-polyfill
3.6.1 Использование
(async () => {
const abortController = new AbortController();
setTimeout(() => {
abortController.abort();
}, 500);
try {
await delay6(1000, {signal: abortController.signal});
} catch (error) {
// 500 milliseconds later
console.log(error.name)
//=> 'AbortError'
}
})();
3.6.2 Реализация
const randomInteger = (minimum, maximum) => Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
const createAbortError = () => {
const error = new Error('Delay aborted');
error.name = 'AbortError';
return error;
};
const createDelay = ({willResolve}) => (ms, {value, signal} = {}) => {
if (signal && signal.aborted) {
return Promise.reject(createAbortError());
}
let timeoutId;
let settle;
let rejectFn;
const signalListener = () => {
clearTimeout(timeoutId);
rejectFn(createAbortError());
}
const cleanup = () => {
if (signal) {
signal.removeEventListener('abort', signalListener);
}
};
const delayPromise = new Promise((resolve, reject) => {
settle = () => {
cleanup();
if (willResolve) {
resolve(value);
} else {
reject(value);
}
};
rejectFn = reject;
timeoutId = setTimeout(settle, ms);
});
if (signal) {
signal.addEventListener('abort', signalListener, {once: true});
}
delayPromise.clear = () => {
clearTimeout(timeoutId);
timeoutId = null;
settle();
};
return delayPromise;
}
const createWithTimers = () => {
const delay = createDelay({willResolve: true});
delay.reject = createDelay({willResolve: false});
delay.range = (minimum, maximum, options) => delay(randomInteger(minimum, maximum), options);
return delay;
}
const delay6 = createWithTimers();
3.7 Пользовательские функции clearTimeout и setTimeout седьмой редакции
3.7.1 Использование
const customDelay = delay7.createWithTimers({clearTimeout, setTimeout});
(async() => {
const result = await customDelay(100, {value: '我是若川'});
// Executed after 100 milliseconds
console.log(result);
//=> '我是若川'
})();
3.7.2 Реализация
Передайте clearTimeout, setTimeout два параметра, чтобы заменить предыдущую версиюclearTimeout，setTimeout. Отсюда и седьмое издание. То естьdelayокончательная реализация.
const randomInteger = (minimum, maximum) => Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
const createAbortError = () => {
const error = new Error('Delay aborted');
error.name = 'AbortError';
return error;
};
const createDelay = ({clearTimeout: defaultClear, setTimeout: set, willResolve}) => (ms, {value, signal} = {}) => {
if (signal && signal.aborted) {
return Promise.reject(createAbortError());
}
let timeoutId;
let settle;
let rejectFn;
const clear = defaultClear || clearTimeout;
const signalListener = () => {
clear(timeoutId);
rejectFn(createAbortError());
}
const cleanup = () => {
if (signal) {
signal.removeEventListener('abort', signalListener);
}
};
const delayPromise = new Promise((resolve, reject) => {
settle = () => {
cleanup();
if (willResolve) {
resolve(value);
} else {
reject(value);
}
};
rejectFn = reject;
timeoutId = (set || setTimeout)(settle, ms);
});
if (signal) {
signal.addEventListener('abort', signalListener, {once: true});
}
delayPromise.clear = () => {
clear(timeoutId);
timeoutId = null;
settle();
};
return delayPromise;
}
const createWithTimers = clearAndSet => {
const delay = createDelay({...clearAndSet, willResolve: true});
delay.reject = createDelay({...clearAndSet, willResolve: false});
delay.range = (minimum, maximum, options) => delay(randomInteger(minimum, maximum), options);
return delay;
}
const delay7 = createWithTimers();
delay7.createWithTimers = createWithTimers;
4. запрос на отмену аксиом
axiosПринцип отмены: по прохождениюconfigнастроитьcancelTokenформу для отмены. СуждениеcancelToken,существуетpromiseприкованныйdispatchRequestвыдает ошибку наadapterсерединаrequest.abort()отменить запросpromiseкrejected, информация об отмене фиксируется пользователем.
больше посмотреть мойaxiosМодуль отмены исходной статьиИзучите общую архитектуру исходного кода axios и отмените модули
5. Резюме
Мы реализовали относительно полную функцию задержки с функцией отмены с нуля. то естьзадержка более 70 строк исходного кодареализация.
Содержит поддержку случайного окончания времени, ранней очистки, отмены, настройкиclearTimeout、setTimeoutи другие функции.
отмененmdn AbortControllerТак как совместимость не очень, в сообществе есть соответствующиеnpm abort-controllerвыполнитьpolyfill.
yet-another-abortcontroller-polyfill
Рекомендуется клонировать проект, чтобы запустить пример отладки службы, который будет более впечатляющим.
# 推荐克隆我的项目，保证与文章同步
git clone https://github.com/lxchuan12/delay-analysis.git
cd delay-analysis
# 我写的例子都在 examples 这个文件夹中，可以启动服务本地查看调试
npx http-server examples
# 打开 http://localhost:8080
Наконец, вы можете продолжать следовать за мной @ Ruo Chuan. добро пожаловать, чтобы добавить меня wechatruochuan12общаться, участвоватьЧитайте исходный код вместеДеятельность, каждый изучает около 200 строк исходного кода каждую неделю и вместе добивается прогресса.
О && Группа обмена чтением исходного кода
недавно организованныйЧтение исходного кода, если вам интересно, вы можете добавить меня в WeChatruochuan12Участвуйте в долгосрочном обмене и обучении.
Автор: Чанг ИВакагаваНазвание смешано в реках и озерах. добро пожаловать, чтобы добавить меня wechatruochuan12. По дороге на фронт | Знаю очень мало, только хорошо учусь.
Обратите внимание на паблик аккаунта Ruochuan Vision, Изучайте исходный код вместе каждую неделю, учитесь читать исходный код и переходите к расширенному интерфейсу.
Блог Вакагавы
segmentfaultКолонна Вакагава Видение, открылВидение ВакагаваКолонка, добро пожаловать на внимание ~
Колонка самородков, добро пожаловать, обратите внимание~
Колонна видений Чжиху Руочуань, открылВидение ВакагаваКолонка, добро пожаловать на внимание ~
github blog, спроситьstar^_^~