---
title: AJAX API 講解
tags: AJAX, axios, 非同步,
description:
---

AJAX API 講解
---

### 網路請求種類

:point_right: [HTTP 請求方法](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods)

:::success
POST 方法用於**提交指定資源的實體**，通常會**改變**伺服器的狀態或副作用（side effect）。
:::

---

### 四種常見的 POST 請求 content-type

**發出請求的資料格式 request header Content-Type**

1. application/x-www-from-urlencoded
- 透過HTML`<form>`表單

2. application/json
- 把資料包裝成`JSON`格式

3. multipart/from-data
- 傳送檔案或圖片

4. text/plain
- 記事本格式

要依照對方伺服器的`request header Content-Type`的格式，來編寫資料格式，對方伺服器才能**正確接收到**發出請求

---

### 透過 axios 實做註冊 post 網路請求

- 變數`registerData`依照`application/json`格式，編輯發出**post註冊請求的物件資料**。

- `.post()`請求填入`API網址(字串)`、變數`registerData`，`axios.post('API網址', registerData)`。

- 發出post註冊請求**無誤**，會接收到**正確**回傳，觸發.then()，箭頭函式參數`response`接收資料。

- 發出post註冊請求**錯誤**，會接收到**錯誤**回傳，觸發.catch()，箭頭函式參數`err`接收資料。

const registerData = {
  email: '[e-mail]',
  password: '12345678'
};

axios.post('https://hexschool-tutorial.herokuapp.com/api/signup', registerData)
  .then((response) => {
    console.log(response);
  })
  .catch((err) => {
    console.log(err);
  }); 

---

### 實做 axios DOM 表單註冊流程

輸入帳號、密碼並點擊按鈕送出，axios發出post請求給伺服器，在畫面上顯示伺服器回傳的response.data.message資訊。


**HTML部分**

<label for="account">帳號：</label>
<input type="text" id="account" class="account" placeholder="輸入帳號">
<br>
<label for="password">密碼：</label>
<input type="text" id="password" class="password" placeholder="輸入密碼">
<br>
<button type="button" class="send">送出</button>
<h4 class="resultMsg"></h4>

<br>

**JavaScript部分**

- `document.querySelector()`分別把`<input>`、`<button>`、`<h4>`選擇起來，並賦予給變數。

- 函式`signUp()`把post請求要送出的`JSON`資料、`axios`程式碼，全都封裝在一起。

- 把輸入email的`<input>`元素的value值，賦予到`JSON`資料`registerData.email`。

- 把輸入password的`<input>`元素的value值，賦予到`JSON`資料`registerData.password`。

- `axios`不管是`.then((response) => {})`或`.catch((err) => {})`接收到的資料，都賦予給變數`resultMsg.textContent`做狀態的呈現。

const account = document.querySelector('.account');
const password = document.querySelector('.password');
const send = document.querySelector('.send');
const resultMsg = document.querySelector('.resultMsg');

send.addEventListener('click', (e) => {
  signUp();
  account.value = '';
  password.value = '';
});

function signUp(){
  let registerData = {
    email: '',
    password: ''
  };
  registerData.email = account.value;
  registerData.password = password.value;
  axios.post('https://hexschool-tutorial.herokuapp.com/api/signup', registerData)
    .then((response) => {
      resultMsg.textContent = response.data.message;
    })
    .catch((err) => {
      resultMsg.textContent = err.data.message;
    });
};