---
title: AJAX-axios套件
tags: AJAX, axios, 非同步,
description:
---

AJAX-axios套件
---

### axios安裝環境

:point_right: [axios](https://github.com/axios/axios)

這裡選擇CDN版本來安裝。

https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js

axios引入的順序一定要在，自行編輯的JavaScript檔案**之前**。

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="./all.js"></script>

<br>

### 嘗試串接外部資料
- 開頭一定是`axios`用來發出請求。`get`是用來取得資料的意思。

- 括號內的單引號`('')`，填入`JSON`資料網址。

- 發出`.get()`請求，當伺服器回傳資料後，就會==觸發`.then()`內的函式==， 函式執行後**response就得到回傳的結果**，整理成一個`response`的物件。

- response.data：請求後，以**陣列包裹物件形式**，回傳資料。
- response.status：狀態碼。

axios.get('/user/12345')
 .then(function (response) {
   console.log(response.data);
   console.log(response.status);
   console.log(response.statusText);
   console.log(response.headers);
   console.log(response.config);
 });

<br>

### axios-非同步觀念

**為什麼axios是非同步執行？**
- 正常函式執行時序是==由上到下==。

- 假設axios是同步執行，若等待接收大筆資料**結束才進行後面的程式碼**，這樣網頁渲染的時間會**變長**，使用者體驗也會變差。

- 當axios**發出`.get()`請求**後，還在**等待伺服器回傳資料**觸發`.then()`時，axios後面的程式碼**會繼續執行**，直到`.then()`接收到回傳資料後，再執行`.then()`裡面的函式。
<br>

這個**範例執行的時序是...**
- axios發出`.get()`請求給伺服器，等待回傳資料的同時。

- 會先執行第7行的`console.log(data)`。

- 接收到回傳的資料時，觸發`.then()`執行內部函式，印出`console.log('已收到回傳資料')`，也把`response.data`賦予給變數`data`。

let data = [];

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){
    console.log('已收到回傳資料');
    data = response.data;
  });

console.log(data);

<br>

### 透過函式設計處理非同步

- `axios`接收到伺服器回傳的資料，觸發`.then()`執行內部函式。

- 函式`renderData`用來**處理**，把`axios`接收的資料渲染到`<h1>`元素上。

<h1 class="title"></h1>

let data = [];

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){
    console.log('已收到回傳資料');
    data = response.data;
    renderData();
  });

function renderData() {
  document.querySelector('.title').textContent = data[0].name;
};

console.log(data);