使用Axios進行React數據請求和處理的技巧

一、了解Axios

Axios是一個基於Promise的HTTP客戶端，可以輕鬆地進行數據請求。它支持瀏覽器和Node.js兩種環境下的使用，是現今最流行的HTTP請求庫之一。

如果你是一個React開發者，那麼肯定知道這個初學階段必須要學會使用的庫。 如果不清楚該如何使用Axios，可以先閱讀官方文檔：https://github.com/axios/axios。

二、安裝Axios

首先，確保你已經安裝了npm。 然後，在項目根目錄下運行以下命令安裝Axios。

npm install axios

三、Axios基本用法

在React項目中使用Axios進行數據請求，應該要考慮到以下幾個方面的因素。

1. 發送get請求

Axios發送get請求的方式如下：

axios.get('https://api.github.com/users/username')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

這個例子發送了一個HTTP GET請求，並將響應結果輸出到控制台。當然也可以將響應結果賦給React組件的狀態值，並顯示在頁面上。

2. 發送post請求

Axios發送post請求的方式如下：

axios.post('/user', {
        firstName: 'John',
        lastName: 'Doe'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

這個例子會將一個帶有firstName和lastName欄位的對象發送給服務端的/user路由。正如get請求一樣，也可以將響應結果賦給React組件的狀態值，並顯示在頁面上。

3. 使用async await

除了使用promise，你也可以使用async/await語法糖獲得更好的代碼可讀性，同時也能夠避免回調地獄的問題。

以下是使用async/await處理Axios請求的例子：

async function getData() {
        try {
            const response = await axios.get('/api/data.json');
            console.log(response.data);
        } catch (error) {
            console.log(error);
        }
    }

雖然這種方式看起來比使用promise少了兩行，但是它能夠更好地結合try catch塊進行錯誤處理。

四、錯誤處理

當Axios處理HTTP請求錯誤時，應該要進行以下幾個方面的處理。

1. 處理HTTP錯誤狀態碼

在Axios中，伺服器錯誤、客戶端錯誤以及網路錯誤都會被轉化為HTTP錯誤狀態碼。

以下為常見HTTP錯誤狀態碼：

• 1xx：信息響應類，表示接收到請求並且繼續處理
• 2xx：成功響應類，表示動作被成功接收、理解和接受
• 3xx：重定向類，表示需要客戶端採取進一步操作才能完成請求
• 4xx：客戶端錯誤類，表示客戶端在請求的過程中發生了錯誤
• 5xx：伺服器錯誤類，表示伺服器在處理請求的過程中發生了錯誤

可以通過catch塊來捕捉HTTP錯誤狀態碼並進行處理。以下是一個例子：

axios.get('/api/data.json')
    .then(response => {
        // 處理響應結果
    })
    .catch(error => {
        // 處理錯誤情況
        if (error.response) {
            // 伺服器返回錯誤狀態碼
            console.log(error.response.status);
        } else if (error.request) {
            // 請求本身錯誤
            console.log(error.request);
        } else {
            // 未知錯誤
            console.log(error.message);
        }
    });

2. 處理請求取消

有時候，用戶可能會想要取消某些請求，以避免不必要的資源消耗。

以下是一個使用Axios取消請求的例子：

const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
        
    axios.get('/api/data.json', {
            cancelToken: source.token
        })
        .then(response => {
            // 處理響應結果
        })
        .catch(error => {
            // 處理取消請求
            if (axios.isCancel(error)) {
            console.log('請求被取消了！');
        } else {
            // 處理其他錯誤情況
        }
    });

    // 使用source.cancel方法可以取消請求
    source.cancel('取消了請求');

五、Axios攔截器的使用

通過Axios的攔截器，可以在請求發送前和響應返回後攔截和處理數據。以下是一個使用攔截器做許可權驗證的例子：

// 添加請求攔截器
    axios.interceptors.request.use(
        config => {
            // 在請求發送之前做些什麼
            if (localStorage.token) {
                config.headers.Authorization = 'Bearer ' + localStorage.token;
		    }
            return config;
        },
        error => {
            // 對請求錯誤做些什麼
            return Promise.reject(error);
        }
    );
        
    // 添加響應攔截器
    axios.interceptors.response.use(
        response => {
            // 對響應數據做些什麼
            return response;
        },
        error => {
            // 對響應錯誤做些什麼
            if (error.response.status === 401) {
                console.log('需要登錄！');
            }
            return Promise.reject(error);
        }
    );

這個例子中，在請求發送前通過請求攔截器添加了Bearer Token頭，同時在響應返回後通過響應攔截器檢查了用戶登陸狀態。

六、總結

今天，我們了解了如何使用Axios進行React數據請求和處理。

我們從以下幾個方面來介紹Axios的使用方法：了解Axios、安裝Axios、Axios基本用法、錯誤處理、Axios攔截器的使用。

當然，Axios並不是唯一的HTTP請求庫。在很多時候，我們同樣可以使用fetch或者jQuery的$.ajax()方法來發送HTTP請求。通過學習這些不同的HTTP請求庫，我們可以擁有更多的選擇，從而在具體場景中做出更合適的選擇。