Truyền giá trị của hàm tải xhr trên toàn cầu

Question

Trong ứng dụng tôi đang tạo tôi có XMLHttpRequest dưới đây và tôi đang cố gắng chuyển kết quả của data bên trong xhr.onload() vào một mảng được tạo trong cùng một hàm cha.

var url = 'http://api.soundcloud.com/resolve.json?'+resource+'&'+CLIENT_ID; 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', url, true); 
xhr.onload = function(){ 
    var data = JSON.parse(xhr.responseText); 
    console.log(data.permalink_url); 
}; 
xhr.send(); 

Dưới đây tôi có khối xây dựng của mảng và tôi đang cố chuyển kết quả của dữ liệu vào chuỗi theo dõi.

var metadata = { 
     id: val, 
     title: title, 
     url: posturl, 
     track: data.permalink_url 
     }; 

Tất cả những gì tôi đã cố gắng vậy, đến nay cả hai trả undefined hoặc function và bây giờ tôi hoàn toàn ra khỏi ý tưởng ...

Answer 1

Ajax thực hiện không đồng bộ (nói chung). Điều này rất quan trọng đối với cách Ajax hoạt động. Điều này có nghĩa là bạn không thể đếm số khi phương thức onload sẽ kích hoạt hoặc thậm chí nếu nó sẽ kích hoạt. Điều này có nghĩa là tất cả mã phụ thuộc vào số xhr.responseText (kết quả của yêu cầu HTTP) phải được thực hiện trong chính cuộc gọi lại. Ví dụ:

xhr.onload = function() { 
    // This will execute second 
    doStuffWithData(JSON.parse(xhr.responseText)); 
} 
// This will execute first 
xhr.send(); 
var anything = anythingElse; 

Answer 2

Như tôi đã nói trong bình luận cho my previous answer, bạn có thể thay đổi một dòng vào xhr.open('GET', url, false). Nó sẽ làm cho yêu cầu đồng bộ và sẽ ngăn chặn mọi thứ khác chạy cho đến khi yêu cầu hoàn tất. Nó sẽ cho phép bạn truy cập xhr.responseText mà không cần đợi chức năng tải.

CLIENT_ID = 'client_id=xxx'; 
var src = track, 
    match = src.match(/url=([^&]*)/), 
    resource = match[0], 
    stream = decodeURIComponent(match[1]) + '/stream/?' + '&' + CLIENT_ID; 

var url = 'http://api.soundcloud.com/resolve.json?' + resource + '&' + CLIENT_ID; 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', url, false); 
xhr.send(); 

parsedResults.push({ 
    title: title, 
    track: JSON.parse(xhr.responseText) 
}); 

Bạn có thể see it in action here. Dường như nó bị hỏng trong Chrome vì một lý do nào đó. Hoạt động trong Firefox mặc dù. Tôi giả sử nó là một cái gì đó để làm với chuyển hướng CORS + 302 + yêu cầu đồng bộ.

Answer 3

Tôi đã sử dụng giải pháp Explosion Pills. Vấn đề duy nhất tôi gặp phải là các liên kết được thu thập thông tin không phải lúc nào cũng quay lại theo cùng một thứ tự mỗi khi tôi chạy ứng dụng nút. Thực tế họ nên quay trở lại theo thứ tự mà chúng được thu thập thông tin (đó sẽ là bài viết mới nhất trước, phải không?) Tuy nhiên, điều này không phải luôn luôn như vậy?