APIの登録とサーバデータのバインド

Mockサーバに登録されているAPIを使用

Mockサーバに登録されたAPIデータを呼び出してリストをレンダリングするプログラムを実装する.

axiosモジュールのインストール

サーバデータを呼び出すときにaxiosオープンソースを使用することが多い.

インストールリンク
https://github.com/axios/axios

using npm$ npm install axios

import<script>importはタグ内でaxiosを使用できます.

<script>
	import axios from "axios";
</script>

axiosによるサーバデータ通信

完全なコード

ServerData.vueファイルを作成し、リンクを接続します.

// index.js
const routes = [
  ..., // serverdata 추가
	{
    	path: "/serverdata",
    	name: "ServerData",
    	component: () =>
      	import(/* webpackChunkName: "about" */ 	"../views/ServerData.vue"),
  	},
]

まず、Server Dataです.vueの完全なコードを見てください.

// ServerData.vue
<template>
  <div>
    <button type="button" @click="getProductList">조회</button>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="i" v-for="(product, i) in productList">
          <td>{{ product.product_name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.delivery_price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      productList: [],
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    async getProductList() {
      this.productList = await this.api(
        "https://a1e284c5-db6b-4726-a0be-a72a59f81862.mock.pstmn.io/productList",
        "get",
        {}
      );
      console.log(this.productList);
    },
    async api(url, method, data) {
      return (
        await axios({
          method: method,
          url: url,
          data: data,
        }).catch((e) => {
          console.log(e);
        })
      ).data;
    },
  },
};
</script>

<style scoped></style>

api関数

非同期関数を作成し、データをサーバに捨て、サーバと通信した後に応答を受信します.パラメータは、Postmanが作成したサーバurl、呼び出し方を表すメソッド(get、put、deleteなど)、サーバにデータを投げ出す必要がある場合に投げ出すデータの3つの部分から構成されます.
サーバ応答のデータは、apiによって受信され得る.

非同期通信
JavaScriptからサーバに特定のリクエストを送信する場合、結果を待つことなく、次のコードを直接実行します.ただし、以下のコードを実行するには、結果を得る必要がある場合があります.その時は.dataasyncを使いました.結果が出るまで待つということです.

awaitは、私たちが導入したaxios機能です.axios、method、urlの情報を提供すると、dataによってサーバから処理され、結果に応答できます.

async api(url, method, data) {
      return (
        await axios({
          method: method,
          url: url,
          data: data,
        }).catch((e) => {
          console.log(e);
        })
      ).data;
    },
  },

getProductList関数

我々が定義したapi関数を呼び出し、インポートしたデータを.dataproductListgetProductList|に格納する非同期関数を定義します.urlは、postmanで作成したmockサーバURLを使用してください.getです.しかもデータは捨てられないので、先に空けておきます.コンソールウィンドウに出力して、受信したかどうかを確認します.

async getProductList() {
      this.productList = await this.api(
        "https://a1e284c5-db6b-4726-a0be-a72a59f81862.mock.pstmn.io/productList",
        "get",
        {}
      );
      console.log(this.productList);
    }

残りのセクションでは、リストをレンダリングするために、以前から使用していたv-forを使用するため、説明を省略します.
[クエリー](Query)ボタンをクリックして、レンダリングがサーバからインポートされたリストを確認します.

なぜMock Serverを使うのですか?

現在はMockサーバを使用していますが、実際にサーバを使用する場合もこの方法でサーバにアクセスします.urlは実際のサーバになるだけです.したがって,実際のフロントエンド開発を行う場合,通常はMockサーバで開発してから実際のサーバに接続する.

次のレッスン..。

サーバと通信する必要があるすべての画面にはapi関数が必要です.そうすると、必要な場所で関数をコピーして貼り付ける必要があります.したがって、すべてのコンポーネントに登録して使用することを学習します.