react.js, vue.js, angular, svelte 등과 같은 라이브러리에서 promise의 동형 처리

어딘가에서 API에 연결하는 SPA에서 작업하는 경우 많은 가져오기 요청을 작성해야 합니다.

이제 무언가를 가져와서 페이지에 결과를 표시하는 것만큼 간단하지 않습니다.

요청이 현재 보류 중이라는 사용자 표시는 어떻습니까? 리소스를 가져오는 중에 오류가 발생하면 어떻게 됩니까? 결과가 비어 있으면 어떻게 합니까? 요청을 취소할 수 있어야 하는 경우 어떻게 합니까? ...

이 모든 것을 처리하는 것은 많은 상용구를 도입합니다. 이제 구성 요소에 두 개 이상의 API 요청이 있다고 상상해보십시오.

그래서 여기 제가 꽤 오랫동안 사용해 온 접근 방식이 있습니다. 저는 주로 vue.js로 작성한 SPA용으로 이것을 개발했지만 이후 일반 Vanilla JS뿐만 아니라 모든 단일 UI 라이브러리에서 거의 작동한다는 것을 깨달았습니다.

promistate 이라는 라이브러리에 압축을 풀었습니다.

먼저 다음과 같이 약속을 정의하여 작동합니다.

import promistate from 'promistate'

const userPromise = promistate(async function callback(id) {
    return fetch(`/api/users/${id}`).then(res => res.json())
})

이것은 콜백을 바로 실행하지 않지만 userPromise 이미 많은 유용한 속성을 보유하고 있습니다. 예를 들어 userPromise.value라고 말하면 해결된 값(현재 null)을 얻고 userPromise.isPending 약속이 보류 중인지 확인하고 userPromise.error 리소스를 가져오는 중 오류가 발생했는지 확인할 수 있습니다. 몇 가지 더 유용한 속성이 있습니다...

이제 실제로 가져오는 방법은 무엇입니까? 우리는 단순히 userPromise.load(1) . 이제 isPending가 true로 설정되고, 약속이 확정된 후 성공하면 userPromise.value, 오류가 발생하면 userPromise.error 변경됩니다.

이제 Vue 구성 요소에서 작동하는 것을 보겠습니다.

<template>
  <div>
    <button @click="todosPromise.load()">load</button>
    <button @click="todosPromise.reset()">reset</button>

    <div v-if="todosPromise.error">Whoops!</div>
    <div v-else-if="todosPromise.isPending">Pending...</div>
    <div v-else-if="todosPromise.isEmpty">empty...</div>
    <div v-else>
      <div v-for="todo in todosPromise.value" :key="todo.title">{{ todo.title }}</div>
    </div>
  </div>
</template>

<script>
import promistate from "promistate";

export default {
  data() {
    const todosPromise = promistate(() =>
      fetch("https://jsonplaceholder.typicode.com/todos").then(res =>
        res.json()
      )
    );

    return { todosPromise };
  }
};
</script>

좋아, 반응은 어때? 이를 위해서는 usePromistate 후크를 사용해야 합니다.

import React from "react";
import { usePromistate } from "promistate/lib/react";

const api = "https://jsonplaceholder.typicode.com/todos";

export default function App() {
  const [todosPromise, actions] = usePromistate(
    () => fetch(api).then(res => res.json()),
    { defaultValue: [] }
  );

  return (
    <div className="App">
      <button onClick={actions.load}>load</button>
      <button onClick={actions.reset}>reset</button>

      {todosPromise.isPending && <div>pending...</div>}
      {todosPromise.isEmpty && <div>no results...</div>}
      {todosPromise.value.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

문서에는 React.js, Vue.js, Angular, Svelte, Alpine.js 및 Vanilla JS를 포함한 다양한 라이브러리의 전체 예제 목록이 있습니다.