Javascript의 약속 설명 + 예시

선결 조건
이 자습서를 시작하기 전에 다음이 필요합니다.

IDE(이 자습서는 VS 코드를 사용합니다)

Javascript ES6에 대한 기본 이해

Nodejs가 설치되어 있으며 최신 버전here.

을 얻을 수 있습니다.

소개하다.
다른 자원에서 나온 데이터를 처리하는 것은 비동기적인 조작, 즉 순서대로 운행하지 않는 조작을 처리하는 수요를 가져왔다.이 글에서, 나는 자바스크립트에서 비동기적인 조작을 처리하는 방법을 간단하게 설명했다.이 글의 마지막 부분에서, 당신은 자바스크립트의 코드와 간단한 영어 약속을 이해할 것입니다.

자바스크립트 공약이란?
공식 문서에 따르면:

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

구문:

new Promise((resolve, reject)=>{})

더 쉽게 말하면 약속은 약속의 상태에 따라 특정 값을 되돌려주는 대상이다.약속은 세 가지 상태 중 하나가 될 수 있다

fulfilled

rejected

pending

약속fulfilled해결을 약속할 때의 상태는fulfilled인데 이는 약속에 잘못이 없고 잘못이 없다는 것을 의미한다.다음 코드 세그먼트는 약속이 해결되었기 때문에 실현된 상태로 돌아갑니다.

new Promise((resolve, reject)=>{
    resolve(console.log("Hello"))
})

RESULT:
"Hello"
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

약속rejected오류가 발생했을 때 약속한 상태는 rejected입니다.이런 상황에서 약속은 거절당했다.다음 코드 세그먼트는 약속이 거부되었으므로 거부 상태로 돌아갑니다.

new Promise((resolve, reject)=>{
    reject(console.log("Oh no, an error"))
})

RESULT:
"Oh no, an error"
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined

약속pending약속 자체가 해결되지 않거나 거절되었을 때 약속의 상태는 pending이다.다음 코드 세그먼트는 약속이 해결되지 않았고 거부되지 않았기 때문에 상태pending를 되돌려줍니다.

new Promise((resolve, reject)=>{})

RESULT:
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined

약속을 이행하다
Promises를 사용할 때 다음과 같은 방법과 함수를 만날 수 있습니다

방법then: 이 방법은 해석된 약속에서 되돌아오는 값을 얻고 이를 실행한다.then 방법은 일반적으로 약속과 관련이 있다.다음 예제를 참조하십시오.

function getDataFromDatabase(){
    return new Promise((resolve, reject)=>{
        // promise resolves with no errors
    })
}

getDataFromDatabase().then((data)=>{
    // data is the returned value from the getFromDatabase function
    console.log(data)
})

then 키워드를 사용할 때 간단한 영어로 생각하면 도움이 된다.First of all, get data from the database with the getDataFromDatabase() function, and then console.log all the data gotten from the database

처리 프로그램trycatch:trycatch 처리 프로그램은 약속을 처리할 때 매우 자주 사용된다.약속이 rejected 상태가 될 수 있기 때문에 오류를 포착하는 방법을 추가하는 것이 도움이 됩니다. 이것이trycatch 처리 프로그램의 작업 방식입니다.다음 예제를 참조하십시오.

function getDataFromDatabase(){
    return new Promise((resolve, reject)=>{
       try {
           // if Promise resolves, return data from the resolve method
           resolve()
       } catch (error) {
           // if the promise rejects, return error data from the reject method
           reject(console.log(error.message))
       }
    })
}

getDataFromDatabase().then((data)=>{
    // data is the returned value from the getFromDatabase function
    console.log(data)
})

trycatch 프로세서와 함께 일할 때 간단한 영어로 이런 상황을 상상하는 것이 도움이 된다In getting data from the database with the getDataFromDatabase() function, try this code inside this block first, if I successfully get the data, return data from the resolve() function. If I run into some error, return data from the reject function. Then run the function inside the THEN method
코드 예
이 예에서는 외부 엔드포인트에 대한 API 호출을 시도하고 시뮬레이션합니다.이 아이디어는 API 호출을 수행할 때 데이터를 가져오는 지연을 시뮬레이션하는 것이다.다음은 우리가 고려해야 할 단계이다.

데이터 저장소 생성

함수를 만들어서 데이터를 얻기(Javascript의fetch 함수를 상상해 보세요)

새로운 데이터가 최종 확보되면 데이터 스토리지에 추가

콘솔에 결과 기록

1단계: 데이터 저장소 생성
이 예에서 우리는 간단한 그룹을 사용하여 프로젝트를 저장할 것이다. 우리는 여기서 데이터베이스를 모의할 것이다.

let names = ['Kim Seon Ho', 'Park Seo Joon', 'Park Shin Hye', 'Shin Hye Sun']

2단계: 데이터를 얻기 위한 함수를 만듭니다
여기서 setTimeout () 함수를 사용하여 데이터베이스에서 데이터를 가져올 때의 지연을 시뮬레이션할 것입니다.이것이 바로 우리가 Promise를 사용할 곳이다. 왜냐하면 우리는 그것이 우리의 이론 프로젝트에서 비동기 함수로 운행되기를 희망하기 때문이다.

function getData(dataItems) {
    return new Promise((resolve, reject) => {
        try {
            setTimeout(() => {
                resolve(dataItems)
            }, 3000);
        }
        catch (error) {
            reject(console.log(error))
        }
    })
}

**무슨 일이 일어났는지:* 이 코드에서 우리는 getData() 함수가Promise로 되돌아오는 것을 확보했다. 그러면 우리는 Promises가 제공하는 링크 방법을 사용하여 데이터 저장소에서 데이터를 되찾을 때 데이터를 변경/편집할 수 있다.

3단계: 데이터 확보 후 변환

getData(names).then(data=>{
    let newName = 'Han Yoo Joo'
    data.push(newName)
    return data
}).then(finalData=>{
    console.log(finalData)
})

*무슨 일이 일어났는지:*여기, 우리는 getData() 함수를 사용하여 데이터를 얻는다.getData() 함수는 data 방법의 then 매개 변수에 저장된 정보를 되돌려줍니다.then 방법은 해석 방법에서 되돌아오는 데이터를 얻을 수 있고 임무를 수행할 수 있다는 것을 기억하라.바로 이것data이다. 그리고 우리는 Array.push() 방법으로 새로운 이름을 전달한다.

4단계: 콘솔에 결과 기록
마지막 then 방법은 불필요합니다. console.log() 방법을 첫 번째 then 방법에 추가할 수 있기 때문입니다. 그러나 자바스크립트에서 약속을 처리할 때 얼마나 많은 링크를 사용할 수 있는지 보여주기 위해서 추가했습니다.마지막 then 방법에서, 우리는 첫 번째 then 방법에서 되돌아온 데이터를 가져와 컨트롤러에 기록했다.

결실

[
  'Kim Seon Ho',
  'Park Seo Joon',
  'Park Shin Hye',
  'Shin Hye Sun',
  'Han Yoo Joo'
]

결론
Javascript 약속은 코드에서 비동기 함수를 실행하는 좋은 방법입니다.이것은 모든 자바스크립트 프로그래머들의 악몽을 직면하고 지옥으로 돌아가는 것보다 더 좋은 선택이다.
이 Github 저장소에서 온전한 코드 예시를 찾을 수 있습니다: code examples
읽어주셔서 감사합니다. 안녕히 계세요.
안녕히 계세요!
바니샤오.
❤ 만약 네가 이 문장이 매우 유용하다고 생각한다면, 내가 나의 지역 사회를 발전시키는 것을 공유하고 도와주는 것을 기억해라.❤
주: 올해부터 과학기술 경력을 시작하고 싶다면 과학기술판this checklist of 14 careers을 다운로드해서 먼저 배워야 할 프로그래밍 언어를 보세요.