Sử dụng API Fetch để lấy nguồn cấp dữ liệu nhấp nháy theo định dạng json

Question

Tôi quản lý để nhận phản hồi json từ api nguồn cấp dữ liệu nhấp nháy bằng cách sử dụng $ .getJSON, nhưng khi tôi cố gắng làm điều đó bằng cách sử dụng Tìm nạp i dường như để nhận phản hồi XML.

này hoạt động:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
$.getJSON(flickerAPI, { 
        tags: "searchTerm", 
        tagmode: "any", 
        format: "json" 
       }) 
       .done(function (data) { 
        //.... 
       }); 

này không hoạt động:

var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 

var request = new Request(flickerAPI, { 
       mode: 'no-cors', 
       tags: 'searchTerm', 
       tagmode: 'any', 
       format: 'json' 
      }); 

      fetch(request) 
       .then(function (res) { 
        return res.json(); 
       }) 
       .then(function (text) { 
        console.log(text); 
       }); 

tôi cũng muốn hiểu tại sao khi sử dụng Fetch API tôi đang nhận được: "Không 'Access-Control- Không cho phép xuất xứ 'null' do đó không cho phép truy cập. Nếu một phản hồi mờ đáp ứng nhu cầu của bạn, hãy đặt chế độ yêu cầu thành 'no-cors' để tìm nạp tài nguyên bằng CORS bị vô hiệu hóa. " và khi sử dụng $ .getJSON thì không. Cảm ơn bạn !!

Answer 1

Câu trả lời ngắn: args cho fetch(…) phương thức và hành vi của các phương pháp fetch(…) là rất khác so với args cho phương pháp $.getJSON(…) và hành vi của các phương pháp $.getJSON(…)-, do đó bạn không thể mong đợi fetch(…) để làm bất cứ điều gì giống như những gì $.getJSON(…) làm.

Còn câu trả lời, đáp lại câu hỏi cụ thể của bạn:

tôi cũng muốn hiểu tại sao khi sử dụng Fetch API tôi đang nhận: "Không 'Access-Control-Allow-Origin' tiêu đề là hiện tại . trên tài nguyên yêu cầu ... và khi sử dụng $ .getJSON không

URL yêu cầu của bạn có chứa các chuỗi callback=?, vì vậy $.getJSON handles it as JSONP:

Nếu URL bao gồm chuỗi "callback =?" (Hoặc tương tự, như được xác định bởi API phía máy chủ), yêu cầu được coi là JSONP thay thế.

... có nghĩa là đằng sau hậu trường, thay vì gửi yêu cầu gốc từ JavaScript, thay vào đó, tạo thành phần script tải phản hồi JSONP. Vì trình duyệt cho phép phần tử script được sử dụng để tải tập lệnh có nguồn gốc chéo, nên không bao giờ gặp phải bất kỳ hạn chế nào. Tuy nhiên, khi bạn thực hiện cuộc gọi bằng cách sử dụng API Fetch, điều đó không thực hiện bất kỳ phép thuật hậu trường nào để tự động nhận ra yêu cầu dưới dạng yêu cầu JSONP dựa trên URL và không tạo thành phần tử script tới tải phản hồi. Thay vào đó, nó chỉ khiến yêu cầu được gửi trực tiếp đến URL http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" đó.

Nhưng http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" không thực sự có ý định được sử dụng với API tìm nạp hoặc XHR, do đó phản hồi mà nó gửi lại không bao gồm tiêu đề phản hồi Access-Control-Allow-Origin.

Theo giao thức CORS, với trình duyệt thiếu tiêu đề phản hồi Access-Control-Allow-Origin nghĩa là “Không hiển thị phản hồi này cho bất kỳ JavaScript phía máy khách nào đang chạy trong ứng dụng web”.

Vì vậy, trình duyệt của bạn ghi lại rằng “Không có tiêu đề 'Không có' Access-Control-Allow-Origin 'xuất hiện trên tài nguyên được yêu cầu.Do đó, bản gốc 'null' không được phép truy cập ” để cho bạn biết rằng tập lệnh của bạn sẽ không thể truy cập phản hồi và tại sao.

Nếu bạn đang đặt mode: 'no-cors' Tôi không nghĩ bạn sẽ thấy thông báo đó. Nhưng về cơ bản bạn không bao giờ muốn đặt mode: 'no-cors' dù sao, bởi vì làm như vậy có cùng tác dụng như thiếu tiêu đề phản hồi Access-Control-Allow-Origin — điều này ngăn cản tập lệnh của bạn không có bất kỳ quyền truy cập nào vào phản hồi.

---

Theo như mong đợi tags: 'searchTerm', tagmode: 'any', và format: 'json' có bất kỳ tác dụng nếu bạn chỉ định chúng trong đối tượng bạn đưa ra như là đối số thứ hai với phương pháp fetch(…), @ bình luận Yazan của trên là đúng: đó là những tùy chỉnh truy vấn params cho API flickr, vì vậy nếu bạn đang thực hiện yêu cầu GET với API Fetch, bạn cần chỉ định chúng trong URL dưới dạng tham số truy vấn.

$.getJSON Ngược lại, does that for you automatically:

Dữ liệu được gửi đến máy chủ được nối vào URL như là một chuỗi truy vấn.

… trong đó dữ liệu có nghĩa là đối tượng của cặp tên/giá trị bạn cung cấp làm số 2 arg đến $.getJSON.

Ngược lại, đối với phương thức fetch(…), tên và giá trị bạn chỉ định trong đối số thứ hai không được là tham số truy vấn tùy ý. Thay vào đó chỉ có a predefined set of names are allowed ở đó:

• method: Phương thức yêu cầu, ví dụ: GET, POST.
• headers: Bất kỳ tiêu đề bạn muốn thêm vào yêu cầu
• body của bạn: Bất kỳ cơ thể mà bạn muốn thêm vào yêu cầu
• mode của bạn: Các chế độ mà bạn muốn sử dụng cho các yêu cầu
• credentials: Yêu cầu thông tin bạn muốn sử dụng cho các yêu cầu
• cache: các chế độ bộ nhớ cache bạn muốn sử dụng cho các yêu cầu
• redirect: phương thức chuyển hướng sử dụng
• referrer: Một USVString xác định không có người giới thiệu, khách hàng, hoặc một URL
• referrerPolicy: Xác định giá trị của tiêu đề referer HTTP
• integrity: Chứa giá trị toàn vẹn subresource được yêu cầu