자신의 말로 흥미로운 지식을 전하십시오.
안녕하세요 여러분, 저는 梅巴哥er입니다. 이 기사에서는 일부 콜백 함수와 약속 관련 지식에 대해 설명합니다.
약속에 대한 지식은 향후이 블로그에서 업데이트 될 것입니다. 관련된 설명은 모두 개인적인 이해이며 부적합한 부분이 있으면 댓글란에 적어 주시면됩니다. 시간에 답장하고 수정합니다.
참고
약속에 대해 말하면 먼저 콜백 함수에 대해 이야기해야합니다.
콜백 함수 란?
- 이름에서 알 수 있듯이 (먼저 다른 코드를 실행 한 후) 콜백이라는 함수입니다.
// 先看个栗子
function a(m) {
console.log(m)
}
function b(callback) {
var n = 1
callback(n)
}
b(a) // 输出 1
// 可以看出：
// 回调函数a被当做实参传入函数b
// 在执行函数b时，回调函数a被调用
마지막 밤나무는 동 기적으로 실행되는 함수입니다. 즉, b가 a를 호출하면
기다리지 않고 즉시 실행 됩니다.
// 那么，我们再来看个栗子
function callback() {
console.log(1)
}
setTimeout(callback, 1000)
// 先执行外层的setTimeout函数，然后调用callback函数。
// 这里的callback就是一个回调函数。
// 回调函数在另一个函数里充当参数
분명히이 밤나무는 비동기식 콜백이며 콜백 함수를 실행하기 전에 기다려야합니다.
즉, 콜백 함수의 실행은 동기 또는 비동기 일 수 있습니다.
실제 응용 프로그램에서 가장 일반적인 응용 프로그램은 비동기 응용 프로그램입니다.
콜백 함수의 사용은 무엇입니까
위의 예에서 볼 수 있듯이
- 콜백 함수는 동기식 및 비동기식으로 실행됩니다.
- 비동기 적으로 실행하는 경우 실행 채널이 차단되지 않습니다. (다른 사람들이 먼저 실행 한 다음 비동기 적으로 실행하도록하는 것이 매우 예의가 있습니까?)
- 지연된 그림로드와 같은로드 성능을 최적화 할 수 있습니다.
콜백 지옥은 어떻습니까?
먼저 예를 살펴 보겠습니다.
function a(num, callback) {
setTimeout(() => {
console.log(num)
callback() // 回调函数
}, 1000)
}
a(1, function () {
// 无限调用
a(2, function() {
a(3, function () {
a(4, function () {
a(5, function () {
console.log('多少层了')
})
})
})
})
})
// 可以无限写下去。。
위의 예에서 볼 수 있듯이
- 이 함수는 N 번째 수준까지 콜백 함수를 호출했습니다.
- 너무 복잡하고 너무 많이 보면 어지러워지기 쉽습니다.
- 코드를 수정하고 유지하는 것은 편리하지 않습니다.
- 콜백 함수가 복잡하면 계층 감이 나빠져서 잠시 후 쓴 내용을 이해하지 못할 수 있습니다.
중국에서는 누군가가 흉악한 일을하면 18 번째 지옥으로 보내진다는 옛말이 있습니다!
위의 밤나무의 기능을 보시고, 한 층씩 내려 가세요. 지옥처럼 보이나요? ? ?
그래서 이런 종류의 콜백을 回调地狱!
그러나 일반적인 애플리케이션에서는 종종 비동기 적으로 호출하고 인형을 호출해야하는 경우가 있습니다.
ES6의 약속은 콜백 지옥을 해결합니다
이제 위의 코드를 수정 해 보겠습니다.
function a(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(num)
resolve() // 状态成功，执行then里面的函数
// reject() // 状态失败，执行catch里面的函数
}, 1000)
})
}
a(1)
.then(() => a(2)) // then函数里返回的仍然是一个promise对象
.then(() => a(3))
.then(() => a(4))
.then(() => a(5))
.then(() => console.log('多少层了'))
.catch(error => console.log(error))
// resolve取代了回调函数
// 当状态成功时，then指向的是回调函数，一个新的promise对象
지금보세요, 더 명확하지 않나요?
겹겹이 봐도 맑고 아름답고, 파이처럼 보였고, 보면 침을 흘리고 ... 너무 향긋 해요!
예를 통해 제기 된 질문
위의 밤을 보면서 질문하고 싶
습니까? 이것은 무엇을 의미합니까?
그 약속은 무엇입니까?
.then ()이 많은 이유는 무엇입니까?
해결 및 거부는 여전히 상태를 유지할 수 있습니까?
Promise를 사용한 후 갑자기 명확 해지는 이유는 무엇입니까?
Promise是什么이야기 시작
위의 예에서 보는 것은 어렵지 않습니다.
- 약속은 함수가 반환하는 객체입니다.
// 如上面的栗子
function a(num) {
return new Promise((resolve, reject) => {
...
}
}
// 函数a返回(return)了一个对象new Promise()
// 以后我们想用Promise了，就返回或声明一个Promise即可
// Promise通过.then绑定了回调函数(then里面就是回调函数了）
// resolve状态下，执行了then里面的回调函数
// 和回调地狱里的栗子a(num, callback){...}相比，
// Promise栗子的a函数的形参里，
// 并没有写callback回调函数了，因为回调函数已经通过promise绑定了
// .then可以添加多个，按照顺序依次执行，直至回调结束
// 这种多个then（和.catch)的形式，叫链式调用
다른 밤나무를 보겠습니다.
let promise = new Promise((resolve, reject) => {
console.log(1)
// resolve() // 这个状态才会执行then
reject() // 这个状态才会执行catch
// catch后的then，不管什么状态，都会执行
})
promise
.then(() => console.log(2))
.catch(() => console.log(3))
.then(() => console.log(4))
// 输出：1 3 4
// 可以看出：
// 当状态是reject时，会执行.catch里的函数。
// .catch前的.then不会执行
// 而.catch后面的.then不受影响，会继续执行
위에서 언급 한 성공 및 실패 상태는 무엇을 의미합니까?
이것은 단지 개인적인 표현 습관입니다.
사실 이것은 약속의 상태에 대해서도 이야기하고 있습니다.
Promise에는 세 가지 상태가 있으며 그 중 하나에 있어야합니다.
- 보류 중 : 초기 상태이며 적용되거나 거부되지 않습니다.
- Fulfilled : 작업이 성공적으로 완료되었음을 의미합니다.
- 거부 됨 (거부 됨) : 작업이 실패했음을 의미합니다.
작업이 성공하면 (비동기 작업이 성공적으로 완료되고 결과 값이 반환 됨) :
.then의 콜백 함수가 실행됩니다 (즉, resolve 함수가 호출 됨).
작업이 실패하면 (비동기 작업이 실패하고 실패 이유가 반환 됨) :
.catch 함수가 실행됩니다 (즉, 거부 함수가 호출 됨).
이해를 심화시키기 위해 두 개의 밤을 줘
// example1
let pro = new Promise((resolve, reject) => {
setTimeout(
() => resolve('成功') // 异步代码执行成功，调用resolve函数
, 1000)
})
pro
.then(message => console.log('good!' + message + '了！'))
// message的值，是上面调用resolve(..)函数传入的值
// 相当于这样：
// function resolve(message) {console.log('good!' + message + '了！')}
// 这个值不一定是字符串，还可以是别的。
// 比如 resolve(data)
// example2
let pro = new Promise((resolve, reject) => {
setTimeout(
() => reject('failed...') // 异步代码执行失败，调用reject函数
, 1000)
})
pro
.then(message => console.log('good!' + message + '了！'))
.catch(error => console.log(error))
.then(() => console.log('end!'))
// 输出：
// failed... end!
// reject('failed...')就相当于：
// function reject(error) {console.log(error)}
// 再调用reject函数： reject('failed...')
async / await에 대해 이야기
이제 ES6의 Promise에 대해 이야기 했으므로 ES7의 async / await를 언급해야합니다. 비동기가 Promise를 단순화하기 시작했기 때문입니다.
더 잘 이해하기 위해 이제 Promise 예제의 example1 코드를 수정합니다.
// example1改造后
let pro= () => new Promise((resolve, reject) => {
setTimeout(
() => resolve('成功') // 异步代码执行成功，调用resolve函数
, 1000)
})
async function asyncExample() {
console.log(1)
const result = await pro()
console.log(result)
}
asyncExample()
// 输出： 1 成功
변환 전후의 코드를 비교하면 문제가 나타났습니다
- 변환 전에 .then은 어디로 갔습니까?
let pro = new Promise(..)변신 전, 변신 후 어떻게let pro= () => new Promise(..)되었습니까?- 변환 후에는 더 간결 해 보이고 동기 코드가 된 것 같습니다 .async / await에 특별한 것이 있습니까?
문제 분석 및 비동기 설명
예제 수정을 통해 다음을 알 수 있습니다.
- async는 선언적 함수입니다. 즉, 일반 함수 앞에 async가 추가됩니다.
async function pro(){..} - Async / await는 종종 동시에 발생하지만 반드시 필요한 것은 아닙니다. Await는 0 또는 N 배수가 될 수 있습니다.
- Await 뒤에는 다음과 같은 Promise 함수가 있습니다.
await pro() - await pro ()가 생성하는 것은 promise 객체입니다. 예를 들어
const result = await pro(), 여기 결과는 promise 객체입니다. - await는 실행되기 전에 비동기 함수 안에 있어야합니다. 오류를보고하려면 외부에 두십시오.
- 비동기 함수는 약속 객체를 반환해야합니다.
await pro()다음과 같습니다..then((param) => {return param})
Promse와 Async의 관계와 차이점
- 대부분의 비동기 함수는 약속을 사용하여 작성할 수도 있습니다.
- 오류 처리 측면에서 비동기 기능은 비정상적인 오류를 포착하기가 더 쉽습니다.
- 비동기 함수는 Promise 함수를 기반으로 수정됩니다.
- async는 데이터를 저장하는 promise 객체를 반환합니다.
- 비동기는 데이터를 더 직관적으로 가져올 수 있습니다.
위.