Cách gửi các request GET và POST bằng JavaScript Fetch API

Thông thường, các developer làm việc với JavaScript sẽ phải gửi các request GET và POST để lấy hoặc gửi dữ liệu. Một vài thư viện, như Axios chẳng hạn, có thể giúp bạn làm điều này một cách dễ dàng thông qua các cú pháp đẹp. Tuy nhiên, bạn hoàn toàn có thể đạt được kết quả tương tự với bằng cách dùng các cú pháp tương tự với Fetch API – tính năng được hỗ trợ trong tất cả các trình duyệt hiện đại.

Nếu dùng Fetch API, bạn sẽ không phải cài đặt các thư viện mở rộng và do đó, giảm kích thước của file. Bên cạnh đó, bạn vẫn sẽ có các cú pháp đẹp chỉ với vài dòng code. Xem cách làm ngay thôi nào!

Gửi các request GET và POST bằng JavaScript Fetch API

Gửi request bằng Fetch API

Để gửi một request GET bằng Fetch API, hãy dùng đoạn code sau:

fetch( 'https://domain.com/path/?param1=value1&param2=value2' )
    .then( response => response.json() )
    .then( response => {
        // Do something with response.
    } );

Còn nếu bạn muốn gửi một request POST thì dùng đoạn code này:

const params = {
    param1: value1,
    param2: value2; 
};
const options = {
    method: 'POST',
    body: JSON.stringify( params )  
};
fetch( 'https://domain.com/path/', options )
    .then( response => response.json() )
    .then( response => {
        // Do something with response.
    } );

Bạn có thể thấy điểm khác biệt lớn nhất giữa hai request GET và POST là ở cách các thông số được truyền tới lời gọi hàm fetch. Trong hầu hết các trường hợp, các developer sẽ mong muốn truyền vào một object có chứa các tham số và gửi request với một cú pháp đẹp như sau:

const params = {
    param1: value1,
    param2: value2; 
};

const response = get( url, params );
// or
const response = post( url, params );

Để làm vậy, chúng ta cần chạy vài đoạn code để chuyển đổi code gốc với fetch sang cú pháp mới.

Tạo các hàm get post

Bởi vì code để gửi request GET và code để gửi request POST là giống nhau, vậy nên chúng ta sẽ tạo một hàm request chung để tạo request trước. Sau đó, hãy dùng nó để tạo các hàm get và post như sau:

const request = ( url, params, method ) => {
    // All logic is here.
};

const get = ( url, params ) => request( url, params, 'GET' );
const post = ( url, params ) => request( url, params, 'POST' );

Tiếp theo, chúng ta cần xây dựng hàm request.

Chú ý rằng đối với từng hàm, chúng ta sẽ có từng cách khác nhau để xây dựng các thông số: Chúng nằm trong URL của GET và trong nội dung của POST. Nhờ có URLSearchParams, chúng ta có thể chuyển đổi một đối tượng thành một chuỗi truy vấn cho request GET.

Đây là phiên bản đầu tiên:

const request = ( url, params = {}, method = 'GET' ) => {
    let options = {
        method
    };
    if ( 'GET' === method ) {
        url += '?' + ( new URLSearchParams( params ) ).toString();
    } else {
        options.body = JSON.stringify( params );
    }
    
    return fetch( url, options ).then( response => response.json() );
};

const get = ( url, params ) => request( url, params, 'GET' );
const post = ( url, params ) => request( url, params, 'POST' );

Đoạn code trên trả về một promise, và bạn có thể dùng nó trong app như thế này:

get( 'https://domain.com/path', { param1: value1, param2: value2 } )
.then( response => {
    // Do something with response.
} );

Bạn có thể xem cách nó hoạt động trên demo ở CodeSandbox.

Caching request

Các developer thường sẽ cần caching các request để tránh việc bị gửi trùng một request nhiều lần.

Để tiến hành caching, chúng ta có thể tạo một đối tượng để lưu dữ liệu, rồi dùng nó để lấy lại dữ liệu trước đó:

let cache = {};
const request = ( url, params = {}, method = 'GET' ) => {
    // Quick return from cache.
    let cacheKey = JSON.stringify( { url, params, method } );
    if ( cache[ cacheKey ] ) {
        return cache[ cacheKey ];
    }

    let options = {
        method
    };
    if ( 'GET' === method ) {
        url += '?' + ( new URLSearchParams( params ) ).toString();
    } else {
        options.body = JSON.stringify( params );
    }
    
    const result = fetch( url, options ).then( response => response.json() );
    cache[ cacheKey ] = result;

    return result;
};

WordPress REST API

Là một developer WordPress, mình thường phải làm việc với WordPress REST API. Đoạn code ở trên sẽ hoạt động tốt trong các app JavaScript thông thường. Tuy nhiên, bạn sẽ cần sửa lại code một chút để dùng trong WordPress.

Để gửi một request tới WordPress API, bạn cần phải xác thực nó. Ngoài ra, URL cho các request của REST phải chứa URL cơ sở của WordPress. Dưới đây là đoạn code đã được cập nhật:

let cache = {};
const request = ( url, params = {}, method = 'GET' ) => {
    let cacheKey = JSON.stringify( { url, params, method } );
    if ( cache[ cacheKey ] ) {
        return cache[ cacheKey ];
    }

    let options = {
        method,
        headers: { 'X-WP-Nonce': MyApp.nonce }, // Add nonce for WP REST API
    };

    // Setup the rest base URL for requests.
    url = `${ MyApp.restBase }/${ url }`;

    if ( 'GET' === method ) {
        url += '?' + ( new URLSearchParams( params ) ).toString();
    } else {
        options.body = JSON.stringify( params );
    }
    
    const result = fetch( url, options ).then( response => response.json() );
    cache[ cacheKey ] = result;

    return result;
};

Để gửi restBasenonce tới JavaScript , chúng ta cần dùng hàm wp_localize_script như sau trong file PHP của plugin hoặc theme:

wp_enqueue_script( 'my-app', plugin_dir_url( __FILE__ ) . 'js/app.js', [], '1.0', true );
wp_localize_script( 'my-app', 'MyApp', [
    'restBase' => untrailingslashit( rest_url() ),
    'nonce'    => wp_create_nonce( 'wp_rest' ),
] );

Sau đó, bạn có thể tạo các request giống như thế này:

get( 'my-namespace/my-endpoint', { param1: value1, param2: value2 } )
.then( response => {
    // Do something with response.
} );

Lời kết

Trên đây là hướng dẫn cơ bản cách gửi các request GET và POST trong JavaScript bằng Fetch API. Bên cạnh đó, mình cũng đã giới thiệu tới các bạn cách gửi request cho WordPress REST API. Chỉ với vài dòng code, chúng ta sẽ có một cú pháp đẹp y như trong các thư viện khác. Bạn có thể dùng phương pháp này trong một app JavaScript thông thường hoặc trong một plugin WordPress.

Ngoài ra, mình đã viết một bài về cách cải tiến code JavaScript trong WordPress (xây dựng và cải tiến một codebase JavaScript lớn). Bạn có thể nghía qua xem nếu thích!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *