약속 101 및 Fetch, Axios 및 $아제크스

무슨 문제라도 있습니까?
특히 웹 응용 프로그램을 사용할 때 코드가 실행되는 과정은 설정된 순서대로 완성될 수 없습니다. 왜냐하면 많은 데이터가 외부 원본에 의존하기 때문입니다.이러한 외부 원본은 응용 프로그램에 필요한 데이터를 얻는 속도나 속도에 따라 다를 수 있습니다.
기본적으로 Javascript는 "동기화"이고, 단일 Javascript 프로그램은 순서대로 프로그램을 실행하는 프로세스입니다.따라서 자바스크립트에서 동기화 코드의 비동기화 데이터를 처리하는 것은 흥미로운 모험이었다.
최초의 해결 방안은 개발자가 비동기 임무를 완성하는 함수를 만들고 나중에 실행할 리셋 함수를 구축하는 것이다.그러나 통상적으로, 여러 개의 비동기 작업을 실행하고 있을 수 있으며, 이로 인해 리셋에 리셋이 발생할 수 있습니다.이것은 회조지옥이라고 불린다.

myfunction(() => {
  console.log("this is a callback function")
  myfunction(() => {
    console.log("this is a callback function")
    myfunction(() => {
      console.log("this is a callback function")
      myfunction(() => {
        console.log("this is a callback function")
        myfunction(() => {
          console.log("this is a callback function")
        })
      })
    })
  })
})

언약
결국 그들은 자바스크립트에 세 가지 상태를 가진 대상을 추가했다...

TBD

해결

오류

약속은 정해진 시간에 아무 일도 일어나지 않지만, 약속이 해결될 때, 당신은 리셋을 고객에게 전달할 수 있습니다.그리고 되돌아오는 데이터나오류 처리의catch입니다.

const promise1 = functionThatReturnsPromise()

promise1
  .then(data => {
    console.log("I run when the promise resolves")
    console.log("the promise returned: ", data)
  })
  .catch(err => {
    console.log("I run when the promise fails")
    console.log("This is the error: ", err)
  })

만약 당신이 여러 가지 동시에 한 약속이 있다면, 그들은 모두 해결될 때까지 어떤 일도 하고 싶지 않다. 그들은 당신을 잡았다.

const allPromises = Promise.all([promise1, promise2, promise3])

allPromises
  .then(data => {
    console.log("I run when all promises resolves")
    console.log("the promise returned: ", data)
  })
  .catch(err => {
    console.log("I run when if any of the promises fail")
    console.log("This is the error: ", err)
  })

이것은 당연히 지옥보다 더 큰 진보이다.

약속 언제 해요?
가장 일반적인 시나리오는 API 호출이 수행될 때일 수 있습니다.API 호출을 위한 세 가지 방법을 살펴보겠습니다.

되찾다
우선fetch를 소개할 것입니다. 브라우저에 내장되어 있기 때문에 제3자 라이브러리를 불러올 필요가 없습니다. (노드에 있어서는 그렇지만.)
Fetch가 요청을 보내고 약속을 반환합니다.
promise가 해석될 때 버퍼 대상을 되돌려줍니다. 여러 함수를 실행할 수 있습니다. 이 함수들은promise를 되돌려주고 유용한 내용으로 해석됩니다. (보통buffer.json () 을 사용하여 JS 대상에서 변환 json 데이터를 가져옵니다.)

// We run fetch, a promise is returned
const request = fetch("https://jsonplaceholder.typicode.com/posts/1")

//When resolved, we'll run the function to convert the buffer
const response = request.then(res => res.json())

//Then we can use the json data as we wish
response.then(data => {
  console.log(data)
})

코드를 쉽게 읽을 수 있도록 변수에 약속을 저장해 왔습니다.관례에 따라 우리는 이 길을 묶는다.그리고 이렇게 됐어...

// We run fetch, a promise is returned
const request = fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json()) // We convert the buffer
  .then(data => {
    //Do stuff with the data
    console.log(data)
  })

글로벌 변수인 경우 약속이 메모리에 남아 있을 수 있지만 모든 변수가 링크되기 때문에 약속을 변수에 저장하는 것은 최선의 선택이 아닙니다.그리고 함께 있으면 지옥처럼 추해져요.이것이 바로 그들이 최종적으로 async/await 문법을 도입한 이유이다. 이것은 단지 더욱 간결한 문법일 뿐이고 두 가지 키워드가 있다.
async-await 키워드를 사용하기 위해 이 함수가 비동기적임을 표시합니다
대기 - 다음 약속이 해결될 때까지 이 기능을 중지합니다
유일한 문제는 현재 브라우저와 노드의 함수에서 async/await를 사용해야 한다는 것입니다. (최고급 await는Deno에서 사용할 수 있습니다.)따라서 위와 같은 코드는 다음과 같이 작성됩니다.

const getData = async () => {
  // We run fetch, a promise is returned
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  // we convert the buffer
  const data = await response.json()
  // We can use the data
  console.log(data)
}

getData()

이거 훨씬 예쁘잖아!따라서 우리가wait를 사용할 때 우리는 약속을 변수에 분배하는 것이 아니라 이미 해석된 값에 분배한다. 함수는 약속이 해석될 때까지 정지된다. (따라서 함수가 약속 해석을 기다릴 때 코드는 함수 다음에 모든 조작을 계속한다. 이 점을 기억해라. 함수는 전체 과정이 아니라 함수만 정지한다.)

\$.아제크스
달러.jQuery 라이브러리를 사용할 때, aax 함수가 인기가 있습니다.많은 사람들이 jQuery를 떠나서 라이브러리가 커졌지만, 현재 jQuery에는 DOM 함수 (code.jQuery.com) 만 있는 간략한 버전이 있습니다. 만약 집합과 Webpack이 있는 트리 떨림을 사용한다면, 이 패키지는 최종 구축에서 라이브러리에 사용되지 않은 부분을 필터할 수 있기 때문에 비용이 없습니다. (따라서 현재 완전한 jQuery와lodash를 사용할 수 있습니다.)
다음은fetch를\$로 처리할 때의 요청입니다.아제크스

const getData = async () => {
  // We run $.ajax, a promise is returned
  const data = await $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
  })
  // We can use the data
  console.log(data.data)
}

getData()

Axios
Axios는fetch에 존재하기 전에 사람들은 jquery와 독립된 해결 방안을 원했고 간단한 API 호출 방식으로 인해 매우 유행하는 해결 방안이 되었다.
다음은 Axios가 이전 호출을 처리하는 방법입니다.

const getData = async () => {
  // We run axios, a promise is returned
  const data = await axios({
    url: "https://jsonplaceholder.typicode.com/posts/1",
  })
  // We can use the data
  console.log(data.data)
}

getData()

주의해라, 우리는 데이터를 기록한다.데이터가 아니라이는 Axios가 다른 유용한 데이터가 많이 포함된 객체를 반환하고 응답을 해당 객체의 데이터 속성에 포함시키기 때문입니다.

요컨대
promises의 기본 기능을 이해하고 서로 다른 함수를 사용하여 비동기적인 AJAX 요청을 보내는 데 도움이 되었으면 합니다.미래의 게시물에서 나는 어떻게 자신의 사용자 정의 약속을 만드는지 토론할 것이다.