Hướng dẫn javascript send get request with parameters - javascript gửi nhận yêu cầu với các tham số

Nó là một nhiệm vụ chung để các nhà phát triển JavaScript gửi các yêu cầu GET và đăng để truy xuất hoặc gửi dữ liệu. Có những thư viện như Axios giúp bạn làm điều đó với cú pháp đẹp. Tuy nhiên, bạn có thể đạt được kết quả tương tự với cú pháp rất giống với API tìm nạp, được hỗ trợ trong tất cả các trình duyệt hiện đại.send GET and POST requests to retrieve or submit data. There are libraries like Axios that help you do that with beautiful syntax. However, you can achieve the same result with a very similar syntax with Fetch API, which is supported in all modern browsers.

Sử dụng API tìm nạp, bạn không phải cài đặt thư viện bên ngoài và do đó, giảm kích thước tệp được xây dựng. Và bạn vẫn có thể có một cú pháp đẹp với rất ít mã. Hãy để làm điều đó!

Gửi yêu cầu với API tìm nạp

Để gửi yêu cầu GET với API tìm nạp, hãy sử dụng mã sau:

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

Để gửi yêu cầu POST, hãy sử dụng mã sau:

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 sự khác biệt chính giữa các yêu cầu GET và POST là cách các tham số được chuyển đến cuộc gọi ____10. Trong hầu hết các trường hợp, các nhà phát triển dự kiến ​​sẽ vượt qua một đối tượng của các tham số và gửi các yêu cầu trong một cú pháp đẹp như thế này:

const params = {
    param1: value1,
    param2: value2; 
};const response = get( url, params );
// or
const response = post( url, params );

Để làm điều đó, chúng tôi cần một số mã để chuyển đổi mã gốc với

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.
    } );

Tạo các chức năng 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. } );2 và 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. } );3

Bởi vì các mã gửi yêu cầu tương tự nhau giữa GET và POST, chúng tôi sẽ tạo ra một chức năng chung

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.
    } );

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.
    } );

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.
    } );

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' );

Bây giờ, thời gian để xây dựng chức năng

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.
    } );

Lưu ý rằng đối với mỗi chức năng, chúng ta có một cách khác nhau để xây dựng các tham số: chúng là trong URL để nhận và trong cơ thể để đăng. Nhờ

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.
    } );

Đâ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' );

Mã trên trả về một lời hứa và bạn có thể sử dụng nó trong ứng dụng của mình như thế này:

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

Bạn có thể thấy nó trong hành động trên CodeSandBox.

Yêu cầu bộ nhớ đệm

Một vấn đề mà các nhà phát triển thường cần là các yêu cầu lưu trữ, để tránh gửi cùng một yêu cầu nhiều lần.

Để thực hiện bộ đệm, chúng tôi có thể tạo một đối tượng để lưu trữ dữ liệu và sử dụng dữ liệu để trả về 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;
};

API WordPress REST

Là một nhà phát triển WordPress, tôi thường làm việc với API WordPress REST. Mặc dù mã trên hoạt động tốt trong một ứng dụng JavaScript nói chung, nhưng nó cần một số thay đổi để làm việc trong WordPress.

Để gửi yêu cầu đến API WordPress, bạn cần xác thực yêu cầu. Ngoài ra, URL cho các yêu cầu REST phải chứa URL cơ sở WordPress. Đây là mã 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

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.
    } );

const params = {
    param1: value1,
    param2: value2; 
};const response = get( url, params );
// or
const response = post( url, params );

const params = {
    param1: value1,
    param2: value2; 
};const response = get( url, params );
// or
const response = post( url, params );

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ể đưa ra các yêu cầu như thế này:

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

Sự kết luận

Bài đăng này cho bạn thấy cách thực hiện các yêu cầu cơ bản, đăng các yêu cầu trong JavaScript với API tìm nạp. Nó cũng chỉ cho bạn cách thực hiện yêu cầu cho API REST WordPress. Với rất ít mã, chúng ta có thể có một cú pháp đẹp như trong các thư viện khác. Bạn có thể sử dụng phương thức này trong ứng dụng JavaScript chung hoặc trong một plugin WordPress.

Tôi cũng đã viết một bài viết về hiện đại hóa mã JS (cải thiện và hiện đại hóa một cơ sở mã JavaScript lớn). Vì vậy, nếu bạn quan tâm, bạn có thể đọc nó để có một mã tốt hơn.

Mã hóa hạnh phúc!

- -

Ấn phẩm tại Meta Box.

Chúng tôi có thể gửi các tham số truy vấn trong yêu cầu POST không?

UrlSearchParams JavaScript là gì?

Nhận yêu cầu JavaScript?

Yêu cầu bài trong JS là gì?