React: Axios - Day 11

Giới thiệu

Axios là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js.

Đặc điểm Axios

• Tạo XMLHttpRequests từ trình duyệt
• Thực hiện các http request từ node.js
• Hỗ trợ Promise API
• chặn request và response
• Chuyển đổi dữ liệu request và response
• Hủy requests
• Tự động chuyển đổi về dữ liệu JSON
• Hỗ trợ phía client để chống lại XSRF

Cài đặt

Cài đặt package

npm install axios
// or
yarn add axios

Import axios

import axios from 'axios';

Ví dụ

Get data

Trong ví dụ này, chúng ta sẽ gọi 1 Http request để get data từ https://reqres.in/

Tạo component AxiosExample và thêm vào đoạn code sau:

import axios from 'axios';
import { useEffect } from 'react';

const AxiosExample = () => {

    useEffect(() => {
        console.log("Component did mount");
        axios.get('https://reqres.in/api/users?page=2')
            .then(response => {
                // handle data from web server
                console.log(response.data);
            })
            .catch(error => {
                // handle data when getting errors
                console.error(error);
            });
    });

    return <>
        <h1>Axiois Example</h1>
    </>
}

export default AxiosExample;

Giải thích

• ReqRes là một trang web cung cấp một REST API miễn phí để phản hồi các yêu cầu AJAX của bạn. Nó được tạo bởi Ben Howdle và được quản lý bởi Postman. Trang web này cung cấp một số tài nguyên như OpenAPI docs, email hỗ trợ, và tài trợ để giữ cho ReqRes miễn phí. Bạn có thể sử dụng ReqRes để kiểm tra các yêu cầu API của mình hoặc sử dụng nó như một API để phát triển ứng dụng của mình
• axios.get(url) gửi một GET request đến url.
• .then() được sử dụng để xử lý dữ liệu trả về từ máy chủ khi request thành công.
• .catch() được sử dụng để xử lý lỗi nếu request thất bại.

Login

Sử dụng HTTP Post để login với email với password, trả về successfully

import axios from 'axios';
import { useEffect } from 'react';

const AxiosExample = () => {

    useEffect(() => {
        console.log("Component did mount");
        const data = {
            "email": "eve.holt@reqres.in",
            "password": "cityslicka"
        };

        axios.post('https://reqres.in/api/login', data)
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error(error);
            });

    });

    return <>
        <h1>Axiois Example</h1>
    </>
}

export default AxiosExample;

Kết quả

{token: "QpwL5tke4Pnpja7X4"}

axios.post(url, data) gửi một POST request đến url với dữ liệu được truyền vào.

Handle error

ví dụ về cách sử dụng Axios trong một functional component để xử lý các mã lỗi HTTP như 500, 401, ... và xuất ra thông báo lỗi tương ứng

import axios from 'axios';
import { useEffect } from 'react';

const AxiosExample = () => {

    useEffect(() => {
        console.log("Component did mount");
        const data = {
            "email": "peter@klaven"
        };

        axios.post('https://reqres.in/api/login', data)
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                if (error.response) {
                    if (error.response.status === 500) {
                        console.error('Internal Server Error: Something went wrong on the server.');
                    } else if (error.response.status === 401) {
                        console.error('Unauthorized: You are not authenticated.');
                    } else {
                        console.error('An error occurred.');
                    }
                } else if (error.request) {
                    console.error('No response from the server. Check your network connection.');
                } else {
                    console.error('An error occurred while sending the request.');
                }
            });

    });

    return <>
        <h1>Axiois Example</h1>
    </>
}

export default AxiosExample;

Kết quả

{"error":"Missing password"}