檔案分類

我們在撰寫React，會需要養成習慣，清楚分類你的專案。可能因為公司、個人風格、複製來的專案。規劃好檔案分類

現在自學可能只有"你自己"在看整個專案，但如果你的專案維護不只一個人呢? 你三個月後再回來看呢?
可能就看不懂了，維持好習慣。

呼叫API

前端呼叫api 有四個方式

1. form 表格 最簡單 最常見
2. jquery ajax 目前最常使用
3. axios 建立在Ajax上的套件
4. fetch 我自己比較少遇到

請依照你的專案 / 前後端支援性 / 客戶裝置 / 公司需求 評估用誰

(技術說明可以參考邦友)
(Restfull技術說明)

網路上寫法百百種，挑一個自己順手的

安裝axios

終端機安裝

npm install axios

新建管理API文件的檔案
新增資料夾API > 新增檔案 constant.js

/*file: constant.js*/
import axios from 'axios';

/*處理Token*/
const TOKEN_NAME ='ACCESS_TOKEN';
function getAuthToken(){
    var token = localStorage.getItem(TOKEN_NAME);
    try {
        if (token != null) {
            return token
        } else {
            return ''
        }
    } catch {
        return '';
    }
}

/*看溝通格式上需求 調整請求標頭檔headers*/
export const getHeaders = (token) => {
    return {
        'Content-Type': 'application/json;chartset=utf-8',
        'Accept': '*/*', 
        //'Accept-Encoding':"gzip, deflate, br",/*看溝通格式上需求*/
        'Authorization': token //或'Authorization':'Bearer '+ token
    }
}
//API URL /*這個部分是因為我在測試機 一般可能用會環境檔參數的形式讀取*/
const API_URL = "https://localhost:8080/";
//一般
const baseRequest = axios.create({
    baseURL: API_URL
});

//api post demo
export const POST_Login = data => baseRequest.post('/Login', JSON.stringify(data), { data: data, headers: getHeaders(getAuthToken()) });

//api get demo
export const Get_Login = data => baseRequest.get('/Login', { params: data, headers: getHeaders(getAuthToken()) });

在需要呼叫API的頁面

//...開頭
import { POST_Login, GET_Login } from '../global/constants';
/*1. 一定要用{}引用我們自定義好的api函數功能，因為他是函數*/
/*2. 引用的位置是依照我的專案路徑，你的專案檔案管理風格不一樣，就不要抄我的*/

在需要使用的地方
function callAPI(postData){

GET_Login(postData)
    .then((response) => {
        let data = response.data;
        console.log(data);/*顯示資料內容*/
        /*資料解析 and 運算使用*/
    })
    .catch(err => {
        /*登出或錯誤處理*/
        console.log(err);
        if (err.response.status === 401) {
            /*401是常見的錯誤代碼 登入逾期*/
        }else{
        
        }
    })
}

基本的呼叫api就處理好了

示範fetch

一般我是用在axios不好處理的地方，一般也能用ajax或form湊合著用 但就示範看看

url = "請求完整網址";
const formData = new FormData();
formData.append("資料A", 值);
formData.append("資料B", 值);
formData.append("資料C", 值);
formData.append("_token", '{{ csrf_token() }}');

const requestOptions = {
    "method": "POST",
    "headers": {
        "Authorization": '{{ csrf_token() }}'
    },
    "body": formData
};

fetch(url, requestOptions)
    .then((response) => {
        var data = response.json();/*轉格式看你的需求*/
        console.log(data);
        
        /*處理接收資料*/
    })

我真的在用fetch的地方是傳"檔案"為主的請求。fetch跟ajax(axios)有差異，跟中斷請求有關，細節我不太會說明。