Network request trong JS

HTTP là gì?

Theo wikipedia: HTTP - viết tắt của HyperText Transfer Protocol - giao thức truyền tải siêu văn bản, là một trong năm chuẩn về mạng Internet, được dùng để liên hệ thông tin giữa máy cung cấp dịch vụ (Web server) và máy sử dụng dịch vụ (Web client). HTTP là một giao thức sử dụng bộ giao thức TCP/IP.

Các phương thức request của HTTP
HTTP hỗ trợ các phương thức request sau:

GET: phương thức này dùng để lấy thông tin từ server sử dụng URI. Và phương thức GET chỉ nên dùng để lấy thông tin mà không có ảnh hưởng khác tới dữ liệu.
HEAD: tương tự như GET, nhưng phương thức này chỉ dùng để lấy thông tin dòng trạng thái và phần tiêu đề (header).
POST: phương thức này dùng để gửi dữ liệu từ client lên server, ví dụ: thông tin khách hàng, file,...
PUT: dùng để thay thế dữ liệu hiện tại trên server bằng một dữ liệu mới được tải lên. Nói ngắn gọn thì là upload dữ liệu.
DELETE: xoá dữ liệu trên server sử dụng URI.
CONNECT: thiết lập một kênh truyền đến server sử dụng URI.
OPTIONS: miêu tả các tuỳ chọn giao tiếp đến tài nguyên trên server.
TRACE: thực hiện một bài test lặp lại vòng lặp thông báo với đường dẫn đến tài nguyên đích trên server.

Các status code

Status-code là một số nguyên gồm 3 chữ số, dùng để phân loại phản hồi được gửi về từ server. Có 5 loại status-code là:

1xx: (100, 101) : Nó có nghĩa là yêu cầu đã được chấp nhận và tiến trình sẽ được tiếp tục.
2xx: (200 - 206) : Nó có nghĩa là hành động đã được nhận, hiểu và thực hiện thành công.
3xx: (300 - 307) : Nó có nghĩa là phải thực hiện thêm hành động để hoàn thành yêu cầu.
4xx: (400 - 417 ) : Nó có nghĩa là yêu cầu bị sai cú pháp hay là không thể được hoàn thành.
5xx: (500 - 505) : Nó có nghĩa là server không thể thực hiện được yêu cầu.

Gửi HTTP request sử dụng XMLHttpRequest

const req = new XMLHttpRequest();
req.open("GET", "https://httpbin.org/get", false);
req.send(null);
console.log(req.status);
console.log(req.responseText);

Bất đồng bộ:

const req = new XMLHttpRequest();
req.open("GET", "https://httpbin.org/get", true);
req.addEventListener("load", function () {
  console.log(req.status);
  console.log(req.responseText);
});
req.send(null);
console.log("Sent");

Bắt lỗi error:

const req = new XMLHttpRequest();
req.open("GET", "https://httpbin.org/get", true);
req.addEventListener("load", function () {
  console.log(req.status);
  console.log(req.responseText);
});
req.addEventListener("error", function () {
  console.log("Error occurred!");
});
req.send(null);
console.log("Sent");

Triển khai XMLHttpRequest với Promise

function get(requestURL) {
  return new Promise(function (resolve, reject) {
    let XMLHttpRequest =
      window.XMLHttpRequest || ActiveXObject("Microsoft.XMLHTTP");
    let req = new XMLHttpRequest();
    req.open("GET", requestURL, true);
    req.addEventListener("load", function () {
      if (req.status == 200) resolve(req.responseText);
      else if (req.status == 404) throw new Error(xmlPath, "404");
    });
    req.addEventListener("error", function (event) {
      reject(event);
    });
    req.send(null);
  });
}