Hướng dẫn how do you make a post api call in javascript? - làm thế nào để bạn thực hiện một cuộc gọi api bài viết trong javascript?

Thông thường, bạn có thể muốn hệ thống của mình giao tiếp với các máy chủ web khác để có được thông tin.

Ví dụ: giả sử người dùng mới muốn đăng ký tài khoản trên trang web của bạn. Và thay vì phải điền thủ công một biểu mẫu để gửi thông tin của họ đến hệ thống của bạn, họ muốn sử dụng thông tin của họ có trong một dịch vụ hoặc nền tảng khác (nghĩa là xác thực của bên thứ 3) để đăng ký.3rd party authentication) to sign up.

Trong trường hợp như vậy, hệ thống của bạn phải liên lạc với hệ thống của bên thứ ba để có được thông tin của người dùng đó. Và nó làm điều đó thông qua một API.API.

API hoặc giao diện lập trình ứng dụng, chỉ là một bộ quy tắc hướng dẫn cách một phần mềm hoặc hệ thống giao tiếp với một phần mềm khác.

Nếu ứng dụng của bạn là một ứng dụng một trang được xây dựng với ngôn ngữ lập trình không đồng bộ như JavaScript, bạn có một công cụ hữu ích để thực hiện chức năng đó: fetch().

API tìm nạp là gì?

fetch() là một cơ chế cho phép bạn thực hiện các cuộc gọi AJAX đơn giản (JavaScript không đồng bộ và XML) với JavaScript.

Không đồng bộ có nghĩa là bạn có thể sử dụng Fetch để thực hiện cuộc gọi đến API bên ngoài mà không tạm dừng việc thực hiện các hướng dẫn khác. Bằng cách đó, các chức năng khác trên trang web sẽ tiếp tục chạy ngay cả khi cuộc gọi API chưa được giải quyết. means that you can use fetch to make a call to an external API without halting the execution of other instructions. That way, other functions on the site will continue to run even when an API call has not been resolved.

Khi phản hồi (dữ liệu) được gửi lại từ API, các tác vụ không đồng bộ (tìm nạp) tiếp tục. Nếu nó vẫn còn khó khăn, bạn có thể đọc phần giới thiệu chi tiết của tôi về mã không đồng bộ ở đây.

Tuy nhiên, điều quan trọng cần lưu ý là Fetch không phải là một phần của thông số JavaScript, mà là wwtag. Do đó, bạn sẽ không thể sử dụng nó trong môi trường Node.js (trừ khi bạn cài đặt một mô -đun đặc biệt).

Khi chúng ta nói về API, chúng ta cũng cần nói về điểm cuối. Điểm cuối chỉ đơn giản là một URL duy nhất mà bạn gọi để tương tác với một hệ thống khác.endpoints. An endpoint is simply a unique URL you call to interact with another system.

Giả sử rằng chúng tôi đang yêu cầu một API bên ngoài để nhận một số dữ liệu (như một bài đăng trên blog). Đối với điều này, chúng tôi sẽ sử dụng một yêu cầu đơn giản.

Chỉ cần gọi fetch() với URL điểm cuối làm đối số:

fetch('https://ubahthebuilder.tech/posts/1');

Cơ quan phản hồi cho điểm cuối này sẽ là thông tin về một bài đăng trên blog:

{
userId: 1,
id: 1,
title: 'A post by Kingsley',
body: 'Brilliant post on fetch...',
};

Cuối cùng, bạn sẽ muốn có được cơ thể phản hồi. Nhưng đối tượng phản hồi chứa khá nhiều thông tin ngoài cơ thể, bao gồm mã trạng thái, tiêu đề và nhiều thông tin hơn.

Lưu ý rằng API tìm nạp trả về một lời hứa. Bởi vì điều này, bạn cần phải tổ một phương thức sau đó () để xử lý độ phân giải. Tìm hiểu thêm về những lời hứa ở đây.

Dữ liệu được trả về từ API thường không ở dạng có thể sử dụng được. Vì vậy, bạn sẽ cần chuyển đổi dữ liệu thành một biểu mẫu mà JavaScript của bạn có thể hoạt động. Rất may, bạn có thể sử dụng phương thức json() để làm điều đó:

fetch('https://ubahthebuilder.tech/posts/1')
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});

Như bạn có thể thấy trong mã trên, bạn có thể tổ chức một phương thức then() tiếp theo để phân tích dữ liệu (tôi chỉ rút ra tiêu đề trong trường hợp của chúng tôi)

Trong ví dụ này, chúng tôi chỉ đơn giản muốn nhận một bài đăng trên blog từ API. Nhưng nếu chúng ta muốn đăng một câu chuyện thay thế?

Cách thực hiện yêu cầu bài đăng

Khi bạn vượt ra ngoài yêu cầu nhận được, bạn sẽ cần đặt thêm một vài tùy chọn. Cho đến nay, bạn chỉ cung cấp một đối số duy nhất cho fetch() - điểm cuối URL.

Đối với yêu cầu POST, bạn sẽ cần truyền một đối tượng của các tùy chọn cấu hình dưới dạng đối số thứ hai. Đối tượng tùy chọn có thể mất rất nhiều tham số khác nhau. Trong trường hợp này, chỉ bao gồm các thông tin cần thiết nhất.

Bởi vì bạn đang gửi một yêu cầu bài đăng, bạn sẽ cần tuyên bố rằng bạn đang sử dụng phương thức POST.

Bạn cũng sẽ cần truyền một số dữ liệu để thực sự tạo bài đăng trên blog mới. Vì bạn đang gửi dữ liệu JSON, bạn sẽ cần đặt tiêu đề của loại nội dung được đặt thành ứng dụng/JSON. Cuối cùng, bạn sẽ cần cơ thể, đây sẽ là một chuỗi dữ liệu JSON duy nhất.

const update = {
title: 'A blog post by Kingsley',
body: 'Brilliant post on fetch API',
userId: 1,
};

const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(update),
};

Và sau đó, cuộc gọi API:

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(data => {
      if (!data.ok) {
        throw Error(data.status);
       }
       return data.json();
      }).then(update => {
      console.log(update);
      // {
      //
      title: 'A blog post by Kingsley',
      //
      body: 'Brilliant post on fetch API',
      //
      userId: 1,
      //
      id: 101
      // };
      }).catch(e => {
      console.log(e);
      });

Nếu yêu cầu của bạn thành công, bạn sẽ nhận được một cơ quan phản hồi chứa đối tượng bài đăng trên blog cùng với ID mới. Phản hồi sẽ thay đổi tùy thuộc vào cách API được thiết lập.

Cuối cùng, bạn nên lưu ý rằng các điểm cuối có thể thay đổi theo thời gian và API có thể được cơ cấu lại. Vì vậy, bạn nên đặt tất cả các cuộc gọi tìm nạp của bạn với nhau để truy cập dễ dàng hơn.

Sự kết luận

Dưới đây là một số điểm để tóm tắt bài viết này:

• Các hệ thống máy tính như phần mềm giao tiếp với nhau và chia sẻ thông tin thông qua một lớp gọi là API.
• API chứa tập hợp các quy tắc và giao thức hướng dẫn cách hai hoặc nhiều hệ thống tương tác. Ví dụ: hệ thống của Facebook có thể tương tác với hệ thống của Google để có thông tin về người dùng mặc dù API.
• Ở mặt trước, JavaScript, bạn có thể thực hiện các cuộc gọi API đơn giản với tiện ích fetch().
• Để thực hiện một yêu cầu nhận đơn giản với Fetch, bạn chỉ cần vượt qua điểm cuối URL như một đối số.
• Để thực hiện yêu cầu POST, bạn sẽ cần chuyển qua một số tham số khác bao gồm đối tượng cấu hình.

Nếu bạn thích bài viết của tôi và muốn cung cấp hỗ trợ của bạn, vui lòng truy cập trang mua cho tôi một trang cà phê.

Cám ơn và hẹn gặp lại.