Несколько вызовов веб-сервисов от chrome extension

Question

Я пишу свое первое расширение JavaScript JavaScript, используя JQuery 2.2.0, который в основном использует текущий URL-адрес и опросы нескольких различных веб-сервисов, чтобы узнать, есть ли у них запись URL-адреса. Если он существует, я добавляю текстовую ссылку в DOM. Вот упрощенная рабочая версия:

// Does the provided URL exist? 
function url_exists(url) { 
    var h = new XMLHttpRequest(); 
    h.open('HEAD', url, false); 
    h.send(); 
    return h.status!=404; 
} 

// Display a link to the database record URL in the DOM 
function display_database_link(url) { 
    $('body').prepend('<a href="' + url + '">Link</a>'); 
} 


// Get the current URL 
var url    = window.location.href; 
var database_number = 0; 

// See if this URL exists in one of our databases via the API 

// Does the URL exist in database 1? 
if (url_exists("https://api.database1.com/urls/" + url)) { 
    database_number = 1; 
} 

// Does the URL exist in database 2? 
else if (url_exists("https://api.database2.com/urls/" + url)) { 
    database_number = 2; 
} 

if (database_number > 0) { 
    display_database_link("https://api.database" + database_number + ".com/urls/" + url)) 
} 

Что я имею дело, но мне интересно, если:

1. есть способ сделать несколько вызовов url_exists сразу, и

2. если есть способ сделать это асинхронно.

Если кто-то может ответить ссылкой на соответствующую документацию или примеры, я был бы очень признателен!

Answer 1

Есть несколько удивительных особенностей es2015, что сделает это красиво и легко: fetch и promises. Вам нужно будет немного подкорректировать, но что-то вроде этого должно работать.

// Array of API endpoints to to make requests to 
let url = window.location.href; 
let database_urls = ["https://api.database1.com/urls/", "https://api.database2.com/urls/"]; 

// Promise.all will take an array of promises and perform all of them, and `then` process all results at the end 
Promise.all(database_urls.map(database_url => 
    // Make an HTTP request to the endpoint, and `then` get the status code from the response 
    fetch(database_url + url).then(response => response.status) 
// Once `all` promises are resolved, `then` iterate over the resulting statuses 
)).then(statuses => { 
    // Reduce `statuses` to a count of how many are not 404s 
    let existCount = statuses.reduce((prev, curr) => {return curr == 404 ? prev : prev + 1}, 0); 
    // Call method to display link if existsCount is > 0 
}); 

Answer 2

1. Да, вы можете сделать их все сразу, браузер будет выполнять их сразу, но результаты будут принимать diferente количество времени, чтобы добраться до вас ...
2. У вас есть: h.open('HEAD', url, false); третий параметр (false) определяет, является ли запрос асинхронным или синхронным .... Он должен быть установлен в true: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
3. Поскольку у вас есть jQuery, почему бы не использовать функцию AJax? http://api.jquery.com/jquery.ajax/
4. Будьте осторожны, если ваше расширение составляет 1000 запросов к 1000 базах данных, это замедлит работу браузера/интернет-пользователя.
5. Это просит принять X количество времени, пока вы не получите ответ обратно, так что не сразу проверить, если database_number больше 0.