# 第六週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`

## :dart: 如何發出網路請求 (request)
- 可透過瀏覽器輸入一個網址發出請求
- 本地端在 vs code 載入 all.js 後，也可以觀察到本地端如何發出請求(同時包括 font awsome、google font 等)
- 除了瀏覽器，其他軟體也能發出請求，Ex: postman
- 發網路請求並非瀏覽器特權
<br>

----

## :dart: 套件的結構
- 假如有一個套件，套件名稱為 **gon2.js**
- gon2.js 內建一個加法器和打招呼工具

let gon2 = {
    
    add: function(num){
        let a = num += 1;
        return a;
    },
    
    hello: function(){
        console.log('Greetings!')
    }
}

// 呼叫 hello 函式
gon2.hello();

//呼叫 add 函式
let total = 0;
total = gon2.add(total); //重新賦予新值

//gon2 是物件（物件適合用來裝一大包資料）
// . 是讀取屬性（點是屬性）
// total 是參數（參數是函式）

----

## :dart: 為何要使用 axios 套件？
- XMLHttpRequest (XHR)：用原生 JS 的寫法也可發出請求，但需要寫的程式碼行數就更多。
- fetch：也可以發出請求，但也是需要額外再寫些程式碼。
- axios：用法較為簡單直覺。

## :dart: AJAX：axios 套件
- [axios 套件](https://github.com/axios/axios) 是透過 JavaScript 來撈回網路請求的 JS 套件，GET 就是發出網路請求。
- CDN

//Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


//Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

- **GET**
在 get 輸入網址，傳到伺服器後，伺服器會回傳一段資料觸發 then 執行，回傳 response 這一整包資料。

axios.get('這邊輸入 JSON 網址')
  .then(function (response) {
    console.log(response.data); //真正要抓的資料
    console.log(response.status); //回傳成功 200
    console.log(response.statusText); 
    console.log(response.headers);
    console.log(response.config);
  });

- **非同步**
請求發出的過程中，all.js 的程式碼會繼續往下跑，產生**非同步**現象。
包括跑 then (屬於 callback function) 以下的程式碼，會先註冊起來，
等伺服器回應 response 後，因為有 response，axios.get 就會開始執行 then 之後的指令。
非同步的設計原理是希望使用者在等待伺服器回應的過程中，瀏覽器仍有畫面資料可以顯示，因此雖然 axios 資料還沒回傳回來，畫面的其他功能仍可使用。

let localData;

console.log(localData) // (1)undefined (非同步)

axios.get('這邊輸入 JSON 網址')
  .then(function (response) {
    
    console.log(localData) // (3)undefined (資料未賦值)
    
    localData = response.data; //資料傳入 localData
    
    console.log(localData) // (4) array (資料已賦值)
    
  });

console.log(localData) // (2)undefined (非同步)

- 資料回傳、調用時機(line 7~8)：
要做任何有關 localData 的功能(line 7~8)，都要等到資料回傳後才能調用，後續才讀得到資料。

let localData;

axios.get('這邊輸入 JSON 網址')
  .then(function (response) {
        
    localData = response.data; //資料傳入 localData
    addData();
    deleteData();
  });

    function addData(){
        console.log(localData.data) //有資料
    }
    
    function deleteData(){
        console.log(localData.data) //有資料
    }

## :dart: 網路請求種類
#### (1) HTTP 定義了一組能令給定資源，執行特定操作的請求方法（request methods）。他們儘管屬於名詞，但也能稱為 HTTP 動詞。每個方法都有不同的語意，不過也有些共享的相通功能。--- 詳見 [HTTP 請求方法(MDN)](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods)
- **GET 方法**：發出請求從對方伺服器上要求提供資料。
- **POST 方法**：用於提交指定資源的實體，通常會改變伺服器的狀態。
- **DELETE 方法**：會刪除指定資源。
- **PUT 方法**：取代指定資源所酬載請求（request payload）的所有表現。
#### (2) [重新認識 HTTP 請求方法](https://www.ithome.com.tw/node/80062)