1.1 Функция обратного вызова
Функция обратного вызова: передайте функцию A в качестве параметра для вызова другой функции B, тогда A — функция обратного вызова. [Рекомендуется: видеоурок по JavaScript]
Некоторые примеры с названием обратные вызовы
функция Сколько у вас собак(fn){
fn («собака»)
}функция подсчета собак(число){
console.log(количество)
}
Сколько у вас собак (посчитать собак) // одна собакаАнонимный обратный звонок
функция Сколько у вас собак(fn){
fn («собака»)
}
Сколько у вас собак (function(number){console.log(number)
}) // собака Общие примеры
В jQuery используются функции обратного вызова, а здесь используются анонимные обратные вызовы.
$("#btn").click(function(){
console.log('нажмите на меня')
})1.2 Ад обратного вызова (недостаток обратного вызова 1)
Ад обратного вызова: относится к ситуации, когда обратные вызовы слишком вложены, что затрудняет понимание кода.
let info = []function Сколько у вас собак (fn){
fn («собака»)
}function Сколько у вас кошек(fn){
fn('кот')
}функция знает(количество,обратный вызов){
info.push(количество)
console.log(информация) если(обратный вызов){
перезвонить()
}
}//Начинаем звонить. Если слоев больше, будет сложно понять, сколько у вас собак (function(number of Dogs){.
console.log(количество собак)
Понятно(количество собак, функция(){
Сколько у вас кошек(функция(количество кошек){
console.log(количество котов)
Понятно (количество кошек)
})
})
})1.3 Как решить проблему без использования Promise
Используйте именованные функции вместо анонимных функций.
let info = []function Сколько у вас собак (fn){
fn («собака»)
}function Сколько у вас кошек(fn){
fn('кот')
}функция знает(количество,обратный вызов){
info.push(количество)
console.log(информация) если(обратный вызов){
перезвонить()
}
}функция сообщает вам количество кошек (количество кошек){
console.log(количество котов)
Понятно (количество кошек)
}функция продолжения счета(){
Сколько у вас кошек (назовите количество кошек)
}функция сообщает вам количество собак (количество собак){
console.log(количество собак)
Понятно (количество собак, продолжайте считать)
}
Сколько у вас собак (назовите количество собак) // Кажется, не намного лучше. . .1.4 Методы обратного вызова разные и их нужно запомнить отдельно (недостаток обратного вызова 2)
readFile('C:\1.txt',function (error, data) { // обратный вызов в node.js метод чтения файла if(error) {
console.log('успех')
console.log(data.toString())
} еще {
console.log('Не удалось прочитать файл')
}
})
$.ajax({ //URL обратного вызова:'/2.txt' в методе ajax в jQuery
успех: функция (ответ) {
console.log('успех')
},
ошибка: функция(){
console.log('ошибка')
}
})Промисы — это решение асинхронного программирования, более разумное и мощное, чем традиционные решения — обратные вызовы и события. Впервые он был предложен и реализован сообществом ES6, который вписал его в стандарт языка, унифицировал его использование и предоставил объекты Promise изначально.
3.1 Принцип реализации
ES6 предусматривает, что объект Promise является конструктором, используемым для создания экземпляров Promise. Возвращая экземпляр объекта Promise внутри функции, вы можете использовать свойства и методы Promise для следующего шага.
функция имя функции() { return new Promise(function(resolve, ignore) {
// ... некоторый код if (/* асинхронная операция успешна */){
solve(value); // Вызывается, когда асинхронная операция успешна, и результат передается в качестве параметра } else {
ignore(error); // Вызывается при возникновении асинхронного сбоя, передавая ошибку в качестве параметра }
})
}3.2 Логика вызова
Ни S1, ни E1 не сообщили об ошибке, выполните S2 (разрешите выполнение, система считает, что все выполнено, и об ошибке не сообщается)
Если S1 или E1 сообщают об ошибке, выполните E2 (отклоните выполнение, система считает, что это не выполнено, и сообщает об ошибке).
Вход в курс повышения квалификации по интерфейсу (vue): введите обучение
4.1 Свойства и методы Promise
свойство
Promise.prototype представляет метод прототипа конструктора Promise.
Обещание.прототип.тогда()
Вернуть обещание. Для этого требуется не более двух параметров: функции обратного вызова для успеха и неудачи Promise.
Обещание.прототип.catch()
Верните обещание и обработайте отказ. Эквивалент Promise.prototype.then(undefined, onRejected)
Promise.prototype.finally()
Метод «finally()» возвращает обещание. После выполнения then() и catch() будет выполнена функция обратного вызова, указанная «finally». Избегайте ситуации, когда один и тот же оператор необходимо написать один раз в then() и catch().
Promise.all(итерируемый)
Возвращает экземпляр Promise. После разрешения всех обещаний в итерируемых параметрах обратный вызов завершает разрешение.
Promise.race(итерируемый)
Возвращает обещание, сопровождаемое возвращаемым значением объекта обещания или причиной отклонения ошибки, если в итерации есть объект обещания, который «разрешает» или «отклоняет».
Обещание.решить()
Возвращает объект Promise, который разрешается с заданным значением. Но если это значение является thenable (то есть с помощью метода then), возвращаемое обещание будет «следовать» за thenable объектом и примет его окончательное состояние (имеется в виду разрешенное/отклоненное/ожидающее/установленное, если само входящее значение); объект обещания, то объект возвращается как возвращаемое значение метода Promise.resolve, в противном случае объект обещания возвращается с этим значением в качестве статуса успеха;
Обещание.отклонить()
Возвращает объект Promise с параметром причины отклонения.
4.2 Перепишите пример из ада обратного вызова в форму Promise
Вы можете видеть, что после использования Promise логика становится очень интуитивной и написанной более полно.
Когда Promise вложен в Promise, то есть когда Promise связан в цепочку — обратите внимание на сбой передачи информации. Когда мы используем цепочку Promise, если для каждого шага требуются данные из предыдущего шага, параметры должны быть успешно переданы через разрешение. Параметры, в случае неудачи, передать параметры через отказ. Если вы забудете передать параметры, вы не получите желаемого результата.
solve возвращает успешные данные для следующего обратного вызова
Reject возвращает ошибочные данные в следующий обратный вызов.
Передайте здесь параметр для разрешения и измените его на пример ошибки. Не передавайте параметры для отклонения в первую очередь. В случае сбоя следующий обратный вызов не получит данные.
Передайте параметры для отклонения
Мы видим, что даже если обратный вызов сбоя передан, следующий обратный вызов с успехом все равно выполняется. Поскольку он неизвестен () по умолчанию возвращает неопределенное значение, это эквивалентно обработке сбоя. следующий обратный вызов будет реализован.
Измените его на ожидаемый, то есть он не будет вызываться в случае сбоя.
Краткая форма для отказа от звонка в случае неудачи
После выполнения описанной выше ситуации обратный вызов успеха в .then (за исключением собак) не выполняется. Давайте добавим обратный вызов ошибки, чтобы увидеть.
Вы также можете вернуть разрешение, чтобы можно было выполнить последующие успешные обратные вызовы.
4.3 Применение
Загрузка изображения записывает загрузку изображения как обещание. После завершения загрузки состояние обещания изменяется.
const preloadImage = функция (путь) {
вернуть новое обещание (функция (разрешить, отклонить) {
константное изображение = новое изображение ();
image.onload = разрешить;
image.onerror = отклонить;
изображение.src = путь;
});
};Комбинация функции Generator и Promise (подробнее см. ссылку, руководство Жуань Ифэна)
5.1 жду
успешное дело 
Используйте try catch в случае неудачи
Используйте await с try catch, что более полно.
Объекты промисов можно использовать для преобразования обычных функций в формы, возвращающие промисы, чтобы решить проблему ада обратных вызовов.
Понимать логику успешных и неудачных вызовов Promise и гибко ее настраивать.
Поймите основные знания, используйте их в первую очередь, а затем постепенно интегрируйте и усваивайте знания.
Выше приведено подробное содержание примера анализа принципа и использования ES6 Promise!
