HomeLập trìnhJavaScriptJavascript - Yêu...

Javascript – Yêu cầu API với XMLHttpRequest, chức năng xhr.onload – lỗi bản đồ – JavaScript – Diễn đàn freeCodeCamp


Xin chào,

Tôi đã dành hàng giờ cho vấn đề này. Mã NHẬN của tôi cho API OMDB ở bên dưới.
Hoạt động tốt khi người dùng nhập tiêu đề phim vào trường tìm kiếm trong biểu mẫu của tôi, tuy nhiên nếu
kết quả tìm kiếm (được gửi lại) trả về 0/không tìm thấy phim, tôi muốn thông báo cho người dùng qua cảnh báo (ví dụ: câu lệnh if) hoặc thông báo trong HTML (ví dụ: Internalhtml). Bất kỳ đề xuất về cách thêm này vào một cách chính xác?

Vấn đề: Ví dụ, khi tôi nhập một thứ gì đó ngẫu nhiên ‘sodis’, tôi gặp Lỗi trong nhật ký bảng điều khiển của mình. ‘ TypeError: Không thể đọc thuộc tính ‘bản đồ’ của không xác định’.
Tôi đoán là do dữ liệu được gửi lại không phải là một mảng? Tôi giải quyết điều này như thế nào?

function makeRequest(searchTitle) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText).Search;
    response.map(function(item) {
      movieResult("omdb", item.Title, item.Year);
    });
  };
  
  xhr.open("GET", url + searchTitle, true);
  xhr.send();
}

Movieresult và SearchTitle được xác định trong các chức năng khác.

var url = "https://www.omdbapi.com/?apikey=" + apiKey + "&type=movie" + "&s=";


Chào mừng, lou_ise.

Có một số cách bạn có thể xử lý việc này:

  1. Kiểm tra xem phản hồi có chứa thông tin hữu ích không:
if (Array.isArray(response)) {
  // Do stuff
} else {
  // Warn user
}
  1. Chỉ cần bắt lỗi (thường không phải là lựa chọn UX đẹp, nhưng mạnh mẽ hơn 1)
try {
  response.map(,,,)
} catch (err) {
  // Warn user there is has been an error
}

Nếu tôi là người dùng với loại tìm kiếm này, tôi sẽ thấy nội dung như:

<p>No results matched {userQuery}...</p>

Hi vọng điêu nay co ich

Đọc thêm  Hướng dẫn nhanh chóng và đơn giản về Biểu thức chính quy JavaScript

cảm ơn vì đã phản hồi sớm. Tôi đang thử tùy chọn 2 với lỗi bắt lỗi, nhưng vẫn có gì đó không ổn, bây giờ không có gì được trả về mặc dù tôi đã nhập đúng tên phim vào trường tìm kiếm. Bạn có thể vui lòng hỗ trợ cách viết mã lỗi bắt trong chức năng của tôi không? Tôi đã thử dưới đây:

var apiKey = "36e234cd";
var url = "https://www.omdbapi.com/?apikey=" + apiKey + "&type=movie" + "&s=";

//Denna funktion hämtar och skickar data från API och konverterar från JSON data till Javascript
function makeRequest(searchTitle) {
  var X = new XMLHttpRequest();

  X.onload = function() {
    var response = JSON.parse(this.responseText).Search;
    //callback function
    try {
    response.map(function(item) {
      movieResult("omdb", item.Title, item.Year);
    });
  }
  catch (err) {
    alert ("no");
  }
  
  X.open("GET", url + searchTitle, true);
  X.send();
};
}

cảm ơn nhiều,

Louise

Nếu tôi thử tùy chọn 1, không có kết quả tìm kiếm nào được trả về (việc nhận dữ liệu bị chặn bằng cách nào đó?) và tôi gặp lỗi nhật ký bảng điều khiển sau: Uncaught TypeError: Cannot read property ‘map’ of undefined

var apiKey = "36e234cd";
var url = "https://www.omdbapi.com/?apikey=" + apiKey + "&type=movie" + "&s=";

//Denna funktion hämtar och skickar data från API och konverterar från JSON data till Javascript
function makeRequest(searchTitle) {
  var X = new XMLHttpRequest();

  X.onload = function() {
    var response = JSON.parse(this.responseText).Search;
    //callback function
    if (Array.isArray(response)) {
  alert ("oh no");
} else {
  response.map(function(item) {
      movieResult("omdb", item.Title, item.Year);
    });
  }
};
    
    
    
  
  X.open("GET", url + searchTitle, true);
  X.send();
}

Tôi đã chỉnh sửa bài đăng của bạn để dễ đọc. Khi bạn nhập một khối mã vào một bài đăng trên diễn đàn, vui lòng đặt trước nó một dòng ba dấu gạch ngược và theo sau nó là một dòng ba dấu gạch ngược riêng biệt để dễ đọc hơn.

Bạn cũng có thể sử dụng công cụ “văn bản được định dạng sẵn” trong trình chỉnh sửa (</>) để thêm dấu ngược quanh văn bản.

Xem bài đăng này để tìm backtick trên bàn phím của bạn.
Ghi chú: Backticks (`) không phải là dấu nháy đơn (‘).


Bạn chưa hoàn toàn tuân theo logic cho tùy chọn mà tôi đã đưa ra 1. Chỉ khi response là một mảng, nó có phải là mapđạp qua…

Cho try...catch bạn dường như đã trộn lẫn nơi X.onload chức năng nên kết thúc. nên có một } (dấu đóng ngoặc) sau catch chặn.

Hi vọng điêu nay co ich.

Lý tưởng nhất là nếu bạn muốn được trợ giúp thêm về vấn đề này, thì việc thực hiện một dự án thực tế sẽ dễ dàng hơn. Để chia sẻ dự án của mình, bạn có thể sử dụng một trong những cách sau: CodePen, CodeSandbox, Repl.it, Glitch.

Trừ khi có một lý do cụ thể tại sao bạn đang sử dụng XMLHttpRequest, tôi khuyên bạn nên sử dụng tìm nạp thay thế (video youtube).

Đọc thêm  Hướng dẫn setTimeout JavaScript – Cách sử dụng JS Tương đương với chế độ ngủ, chờ, trì hoãn và tạm dừng

Ngoài ra, nếu bạn sẽ không trả lại bất cứ thứ gì từ map bạn không nên sử dụng nó, sử dụng forEach thay vào đó nếu bạn chỉ muốn lặp một mảng.



1 lượt thích



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status