API

APIとは?

バックエンドサーバ上でデータ処理を担当する命令.APIを作成する方法にはRestとGraphqlがあります.
restとGraphqlのAPIの外観は以下の通りです.
rest-API Graphql-API 1番投稿クエリーhttp://abc.com/board/1 board(1)プロファイルクエリーhttp://abc.com/profile/ジョディ profile(「Jordy」)
Restはアドレス形式,Graphqlは通常の関数形式と同一である.
また,両者の最大の相違は응답であった.rest-APIはバックエンドから준비된 내용을 전부を受信する必要があるが、graphql-APIは원하는 내용しか受信できない.
すなわち、rest-apiは、現在の局が投稿に対する要求がある場合、投稿全体を受信することができ、graphql-apiは、作成者、タイトルなどのコンテンツを選択することによってのみ受信することができる.

CRUD

APIのメソッドは、作成、Read、Update、Deleteを意味します.1つの機能では、CRUD形式のAPIを作成する必要があります.(少なくとも4つのCRUDが必要)
restGraphql POSTOMUTATION修正(更新)PUTMUTION削除DELETEMUTTATIONクエリーGETQUERYの作成

rest-API合成例

import axios from ‘axios’
const result = axios.post.(API)
const result = axios.put.(API)
const result = axios.delete.(API)
const result = axios.get.(API)

Graphql-API合成例

import { useMutation, useQuery } from ‘@apollo/client’
const result = useMutation()
const result = useQuery()

同期と非同期

동기とは、サーバコンピュータが動作を完了するのを待ってから、次のタスクを実行する通信を指し、비동기とは逆に、サーバコンピュータが動作を完了するのを待たずに他のタスクを実行する通信を指す.
すなわち、非同期は複数のタスクを同時に処理することができ、同期はそうではない.しかし,非同期処理方式が無条件に有効であるとは考えられない.登録して登録した投稿を表示する必要がある場合は、同期処理が必要です.

promise

promiseは、JavaScriptで非同期処理に使用されるオブジェクトです.pending(대기):非同期処理ロジックが完了する前にfullfilled(이행):非同期処理が完了しましたrejected(실패):非同期処理失敗/エラー

function callRestAPI () {
	const data = axios.get('https://koreanjson.com/posts/1')
	console.log(data) 
}

axiosを使用してrest−APIからデータを要求および受信すると、axiosが非同期で実行されるため、コンソールウィンドウはpromiseを出力することがわかる.
これは、データを受信する前にデータを出力しようとしたときに画面にエラーが発生する問題を解決するためです.承諾ではなく値を得るためには、非同期実行を同期実行に変更する必要があります.

asyncとwait

非同期運転を同期運転に変換するには、asyncおよびawaitを使用することができる.awaitと書かれた行のコード実行が完了するまで、次のコードは実行されません.
asyncは、使用する関数の前に待機している関数に書くことができます.二人で必ず一緒に書くことを忘れないでね!!

 const callRestApi = async () => {
    const result = await axios.get("http://koreanjson.com/posts/1")