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( '//domain.com/path/?param1=value1¶m2=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( '//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( '//domain.com/path/', options )
.then( response => response.json() )
.then( response => {
// Do something with response.
} );0 thành cú pháp mới.
Tạo các chức năng const params = {
param1: value1,
param2: value2;
};
const options = {
method: 'POST',
body: JSON.stringify( params )
};
fetch( '//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( '//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( '//domain.com/path/', options )
.then( response => response.json() )
.then( response => {
// Do something with response.
} );4 để đưa ra yêu cầu trước. Và sau đó sử dụng nó để tạo các hàm const params = {
param1: value1,
param2: value2;
};
const options = {
method: 'POST',
body: JSON.stringify( params )
};
fetch( '//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( '//domain.com/path/', options )
.then( response => response.json() )
.then( response => {
// Do something with response.
} );3 như thế này:
// 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( '//domain.com/path/', options )
.then( response => response.json() )
.then( response => {
// Do something with response.
} );4.
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( '//domain.com/path/', options )
.then( response => response.json() )
.then( response => {
// Do something with response.
} );8, chúng tôi có thể chuyển đổi một đối tượng thành chuỗi truy vấn để nhận được yêu cầu.
Đâ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 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( '//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;
};
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;
};
Để gửi const params = {
param1: value1,
param2: value2;
};
const options = {
method: 'POST',
body: JSON.stringify( params )
};
fetch( '//domain.com/path/', options )
.then( response => response.json() )
.then( response => {
// Do something with response.
} );9 và const params = {
param1: value1,
param2: value2;
};const response = get( url, params );
// or
const response = post( url, params );0 tới JavaScript, chúng tôi cần sử dụng chức năng const params = {
param1: value1,
param2: value2;
};const response = get( url, params );
// or
const response = post( url, params );1 như sau trong tệp plugin hoặc tập tin PHP chủ đề của bạn:
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.