Javascript 약속 101

Promise이javascript에서의 작업 원리를 이해하면 당신의 개발 기술을 배로 향상시킬 수 있습니다.여기서 나는 다음과 같이 공유할 것이다.

기본 Promise

then

catch 및 오류 처리

나는 이것이 네가 생각하는 것처럼 그렇게 어렵지 않을 것이라고 장담한다.🤓

무엇이 Promise입니까?
MDN:

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

초보자의 용어에서 약속은 JS 대상이다.그것은 성명할 때는 값이 없지만, 장래 어느 때에는 값이 있을 것이다.이 값은 해석되었거나 거부되었습니다.
가령dev.에서 새 것을 주문했다면.당신이 그것을 구매할 때, 그것은 기술적으로 당신의 것이지만, 그것은 완전히 당신의 것이 아니다. 왜냐하면 당신은 실물이 없기 때문이다. 단지 그것이 교부될 것이라고 약속했을 뿐이다.언제든지 후드티의 상태는 도착, 납품 또는 분실이다.후드티가 도착했을 때도 사이즈가 맞지 않거나 다른 제품을 구매했을 경우 거절할 수 있으니 주의하세요.
후드티처럼 약속은 언제나 이행, 거절, 기다림 세 가지 상태가 있다.
new Promise 사용
프로미스를 사용하도록 하겠습니다!

let foo = new Promise((resolve, reject) => {resolve('foo')})
foo.then(value => console.log(value) // foo

우리는 Promise.resolve으로 속기를 할 수 있다.다음 표는 위 표와 같습니다.

let foo = Promise.resolve('foo')
foo.then(value => console.log(value)) // foo

약속 + 시간 초과 설정
비동기식 시뮬레이션을 위해 시간 초과를 추가하겠습니다.

let promise1 = new Promise((resolve, reject) => {
  setTimeout(function() {
    resolve('foo');
  }, 2000)
})
promise1.then(val => console.log(val)) 
console.log("I promise I'll be first!")
// I promise I'll be first!
// ... 2 secs later  ¯\_(ツ)_/¯
// foo

로그의 순서에 주의하세요.
참고:

이 약속이 발표되면(new Promise(...)) 시간이 뚝뚝 떨어지기 시작한다.

promise1 자체가 약속 대상이다.콘솔에서 볼 수 있습니다: promise1 // Promise {<resolved>: "foo"}

당신은 then (또는 다른 비동기적인 방법) 을 사용하여 "foo"에 접근할 수 있습니다.전체 범위 내에서만 console.log(promise1)을 방문할 수 없고, 기대 문자열'foo '를 방문할 수 없다는 것이 내 주장이다.너는 console.log()을 then에 넣어야 한다.

연속 링크
약속은 잠겨서 일련의 약속을 할 수 있다.

let hello1 = new Promise(resolve => resolve("hello1"))

hello1.then(val1 => {
  console.log(val1);
  return "hello2"
}).then(val2 => {
  console.log(val2);
  return "hello3"
}).then(val3 => {
  console.log(val3)
})
// hello1
// hello2
// hello3

여기서 당신은 나의 인사 then에 이어 return에 대해 "안녕하세요"라고 말할 것이다.이 "hello2"는val2의 값입니다.두 번째 then과 같이 "hello3"을 되돌려줍니다.val3의 값입니다.약속 체인에서 파라미터를 전달하려면 이전의 then에 반드시 되돌아오는 값이 있어야 한다는 것을 주의하십시오.값을 되돌려 주지 않으면 다음에는 인자가 없습니다.
내 말은:

hello1.then(val1 => {
  console.log(val1);
  return "hello2"
}).then(val2 => {
  console.log(val2); // no return
}).then(val3 => { 
  console.log(val3); // val3 is undefined
})
// hello1, hello2, undefined

체인은 계속되지만 val3은 가치가 없습니다. 왜냐하면 이전 체인은 되돌아오는 값을 제공할 수 없기 때문입니다.

API 호출
나는 단지 프로미스의 API 호출을 간단하게 소개할 뿐이다. 왜냐하면 그의 개념은 setTimeout과 유사하기 때문이다.내장되어 있기 때문에 fetch 을 사용하십시오. (크롬 컨트롤러에서 놀 수 있습니다.)이 코드는 typicode site:

let fetchTodo = fetch('https://jsonplaceholder.typicode.com/todos/1')

fetchTodo // Promise {<pending>}

fetchTodo
  .then(response => response.json())
  .then(json => console.log(json))

우리가 처음으로 fetchTodo = fetch('https://jsonplaceholder.typicode.com/todos/1')을 사용하여 API 호출을 할 때, 그것은 약속을 되돌려줍니다.
저희가 지금 약속 대상을 어떻게 처리할지. - then만 있으면 돼요!

캡처 오류 및 거부 처리
새로운 약속의 두 번째 논점을 기억하십니까?만약 우리가 비동기적인 조작의 결과를 좋아하지 않는다면.우리는 그것을 거절할 수 있지만, 그것을 해결하는 것이 아니다.

let fooReject = new Promise((resolve, reject) => {reject('foo rejected')})
fooReject // Promise {<rejected>: "error foo"}

약속 중의 잘못을 잡는 것은 정말 좋은 습관이다.경험에 근거하다👍:

Every time we use then from now on, always, always have a catch

let foo = new Promise((resolve, reject) => {reject('error foo')})
foo.then(value => console.log(value)).catch(err => console.log(err)) //gotta catch 'em all!
foo //error foo

방금 무슨 일이 있었어요?then만 넣고 catch을 넣지 않으면

foo = new Promise((resolve, reject) => {reject('error foo')})
foo.then(val => console.log(val))
// Promise {<rejected>: "error foo"}

아, 내 크롬 컨트롤러에서, 그것은 잘못이 불가능하기 때문에 불평하고 있었다.우리는 잘못을 잡아야 한다.잡아달라고!

foo.then(val => console.log(val)).catch(err => console.log(err)) // error foo

이제 우리는 더 깨끗한 일지를 보았다!

다른 거절 방법
너는 아마도 물어볼 것이다. "야, 점원, 만약 내가 사슬이 하나 있다면 어떡하지?"

let promise1 = new Promise(fetchSomeApi);
promise
  .then(processApi)
  .then(fetchApi2)
  .then(processApi2)
  .catch(handleCommonError)

"processApi을 위해 다른 일을 하고 싶은데handle Common Error가 나머지 오류를 처리하도록 할까요?"
다행히도 잘못된 것을 잡는 방법은 한 가지가 아니다!then은 두 번째 파라미터를 받아들인다.
위의 첫 번째 코드를 생각해 보세요. let foo = new Promise((resolve, reject) => {resolve('foo')}).사용자 정의 오류 처리는 reject을 사용합니다.
너는 이렇게 할 수 있다.

promise
  .then(processApi)
  .then(fetchApi2, customErrorHandling)
  .then(processApi2)
  .catch(handleCommonError)

processApi 동안 문제가 발생하면 결과는 .then(fetchApi2, CustomErrorHandling) 줄로 넘어갑니다.then이 오류/거부를 보았을 때 fetchApi2이 아니라 customErrorHandling이 터치됩니다.
이것은 좋은 실천입니다. 설령 당신이 리콜을 거절하더라도, 여전히 catch이 있습니다.

더 많은 결심, 거절, 예시 잡기
해결 예:

let successFoo = new Promise((resolve, reject) => {resolve('foo')})
  .then(val => console.log(`I am resolved ${val}`), err => console.log(`I am rejected ${err}`))
  .catch(err => console.log("HELLO ERROR"))
// I am resolved foo

거부된 예:

let rejectFoo = new Promise((resolve, reject) => {reject('error foo')})
  .then(val => console.log(`I am resolved ${val}`), err => console.log(`I am rejected ${err}`))
  .catch(err => console.log("HELLO ERROR"))
// I am rejected error foo

그것은 영원히 catch에 이르지 않을 것이니 주의하세요.두 번째 파라미터는 이 문제를 처리한다.만약 네가 공을 잡고 싶다면 두 번째 논점을 통과하지 마라.

let catchFoo = new Promise((resolve, reject) => {reject('error foo')})
  .then(val => console.log(`I am resolved ${val}`)).catch(err => console.log("HELLO ERROR"))
// HELLO ERROR

이게 다야!분명히 기본적인 상황을 제외하고는 모든 내용이 포함된 것은 아니다.나의 목표는 네가 대사들에게 약속하는 것이 아니라, 너로 하여금 더 많은 재미있는 일을 시작하게 하는 것이다.이 모든 게 의미가 있었으면 좋겠어요!
아직 언급하지 않은 약속이 더 있습니다. 저는 all() , finally() 과 race() 을 조회할 것을 건의합니다.약속합니다(😎), 네가 시간을 쓸 만하다!
읽어 주셔서 감사합니다. 예전과 같이, 만약 당신이 오류/타자 오류/오류를 보았다면, 언제든지 저에게 알려 주십시오.
해커!

자료/추가 읽기

Promise docs

Master the JavaScript Interview: What is a Promise?

JavaScript Promises: an Introduction