From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Thu, 13 Feb 2025 15:50:18 +0000 (+0100) Subject: Transition more requests to fetch X-Git-Tag: live~163^2 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/bf194952d78d3d3a0ca0f61bb6142168ad28f1ad?hp=-c Transition more requests to fetch --- bf194952d78d3d3a0ca0f61bb6142168ad28f1ad diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index a94131443..c3ee1e3bc 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -41,19 +41,18 @@ $(document).ready(function () { $("#sidebar_content") .empty(); - $.ajax({ - url: content_path, - dataType: "html", - complete: function (xhr) { + fetch(content_path, { headers: { "accept": "text/html", "x-requested-with": "XMLHttpRequest" } }) + .then(response => { $("#flash").empty(); $("#sidebar_loader").removeClass("delayed-fade-in").hide(); - var content = $(xhr.responseText); + const title = response.headers.get("X-Page-Title"); + if (title) document.title = decodeURIComponent(title); - if (xhr.getResponseHeader("X-Page-Title")) { - var title = xhr.getResponseHeader("X-Page-Title"); - document.title = decodeURIComponent(title); - } + return response.text(); + }) + .then(html => { + const content = $(html); $("head") .find("link[type=\"application/atom+xml\"]") @@ -67,8 +66,7 @@ $(document).ready(function () { if (callback) { callback(); } - } - }); + }); }; var params = OSM.mapParams(); diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js index 3c7101c74..52929018b 100644 --- a/app/assets/javascripts/index/history.js +++ b/app/assets/javascripts/index/history.js @@ -56,24 +56,23 @@ OSM.History = function (map) { } function update() { - var data = { list: "1" }; + const data = new URLSearchParams(); if (window.location.pathname === "/history") { - data.bbox = map.getBounds().wrap().toBBoxString(); + data.set("bbox", map.getBounds().wrap().toBBoxString()); var feedLink = $("link[type=\"application/atom+xml\"]"), feedHref = feedLink.attr("href").split("?")[0]; - feedLink.attr("href", feedHref + "?bbox=" + data.bbox); + feedLink.attr("href", feedHref + "?" + data); } - $.ajax({ - url: window.location.pathname, - method: "GET", - data: data, - success: function (html) { + data.set("list", "1"); + + fetch(window.location.pathname + "?" + data) + .then(response => response.text()) + .then(function (html) { displayFirstChangesets(html); updateMap(); - } - }); + }); } function loadMore(e) { diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js index e6a7cc666..25dc66a28 100644 --- a/app/assets/javascripts/index/layers/data.js +++ b/app/assets/javascripts/index/layers/data.js @@ -79,20 +79,27 @@ OSM.initializeDataLayer = function (map) { function getData() { var bounds = map.getBounds(); - var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString(); + var url = "/api/" + OSM.API_VERSION + "/map.json?bbox=" + bounds.toBBoxString(); /* * Modern browsers are quite happy showing far more than 100 features in - * the data browser, so increase the limit to 4000 by default. + * the data browser, so increase the limit to 4000. */ const maxFeatures = 4000; if (dataLoader) dataLoader.abort(); - dataLoader = $.ajax({ - url: url, - dataType: "json", - success: function (data) { + dataLoader = new AbortController(); + fetch(url, { signal: dataLoader.signal }) + .then(response => { + if (response.ok) return response.json(); + const status = response.statusText || response.status; + if (response.status !== 400) throw new Error(status); + return response.text().then(text => { + throw new Error(text || status); + }); + }) + .then(function (data) { dataLayer.clearLayers(); var features = dataLayer.buildFeatures(data); @@ -116,26 +123,15 @@ OSM.initializeDataLayer = function (map) { if (map._objectLayer) { map._objectLayer.bringToFront(); } + }) + .catch(function (error) { + if (error.name === "AbortError") return; - dataLoader = null; - }, - error: function (XMLHttpRequest, textStatus) { - dataLoader = null; - if (textStatus === "abort") return; - - function closeError() { + displayLoadError(error?.message, () => { $("#browse_status").empty(); - } - - if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) { - displayLoadError(XMLHttpRequest.responseText, closeError); - } else if (XMLHttpRequest.statusText) { - displayLoadError(XMLHttpRequest.statusText, closeError); - } else { - displayLoadError(String(XMLHttpRequest.status), closeError); - } - } - }); + }); + }) + .finally(() => dataLoader = null); } function onSelect(layer) { diff --git a/app/assets/javascripts/index/layers/notes.js b/app/assets/javascripts/index/layers/notes.js index 1bc3714f0..9aa1f203f 100644 --- a/app/assets/javascripts/index/layers/notes.js +++ b/app/assets/javascripts/index/layers/notes.js @@ -75,10 +75,12 @@ OSM.initializeNotesLayer = function (map) { if (noteLoader) noteLoader.abort(); - noteLoader = $.ajax({ - url: url, - success: success - }); + noteLoader = new AbortController(); + fetch(url, { signal: noteLoader.signal }) + .then(response => response.json()) + .then(success) + .catch(() => {}) + .finally(() => noteLoader = null); } function success(json) { @@ -93,8 +95,6 @@ OSM.initializeNotesLayer = function (map) { for (var id in oldNotes) { noteLayer.removeLayer(oldNotes[id]); } - - noteLoader = null; } } }; diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js index 54d5e080f..3673da5db 100644 --- a/app/assets/javascripts/index/query.js +++ b/app/assets/javascripts/index/query.js @@ -157,16 +157,17 @@ OSM.Query = function (map) { $section.data("ajax").abort(); } - $section.data("ajax", $.ajax({ - url: url, + $section.data("ajax", new AbortController()); + fetch(url, { method: "POST", - data: { + body: new URLSearchParams({ data: "[timeout:10][out:json];" + query - }, - xhrFields: { - withCredentials: credentials - }, - success: function (results) { + }), + credentials: credentials ? "include" : "same-origin", + signal: $section.data("ajax").signal + }) + .then(response => response.json()) + .then(function (results) { var elements; $section.find(".loader").hide(); @@ -221,16 +222,17 @@ OSM.Query = function (map) { .text(I18n.t("javascripts.query.nothing_found")) .appendTo($ul); } - }, - error: function (xhr, status, error) { + }) + .catch(function (error) { + if (error.name === "AbortError") return; + $section.find(".loader").hide(); $("
  • ") .addClass("list-group-item") - .text(I18n.t("javascripts.query." + status, { server: url, error: error })) + .text(I18n.t("javascripts.query.error", { server: url, error: error.message })) .appendTo($ul); - } - })); + }); } function compareSize(feature1, feature2) { diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index 23af46145..3c1af5056 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -47,21 +47,19 @@ OSM.Search = function (map) { var div = $(this).parents(".search_more"), csrf_param = $("meta[name=csrf-param]").attr("content"), csrf_token = $("meta[name=csrf-token]").attr("content"), - params = {}; + params = new URLSearchParams(); $(this).hide(); div.find(".loader").show(); - params[csrf_param] = csrf_token; + params.set(csrf_param, csrf_token); - $.ajax({ - url: $(this).attr("href"), + fetch($(this).attr("href"), { method: "POST", - data: params, - success: function (data) { - div.replaceWith(data); - } - }); + body: params + }) + .then(response => response.text()) + .then(data => div.replaceWith(data)); } function showSearchResult() { @@ -125,19 +123,20 @@ OSM.Search = function (map) { var entry = $(this), csrf_param = $("meta[name=csrf-param]").attr("content"), csrf_token = $("meta[name=csrf-token]").attr("content"), - params = { + params = new URLSearchParams({ zoom: map.getZoom(), minlon: map.getBounds().getWest(), minlat: map.getBounds().getSouth(), maxlon: map.getBounds().getEast(), maxlat: map.getBounds().getNorth() - }; - params[csrf_param] = csrf_token; - $.ajax({ - url: entry.data("href"), + }); + params.set(csrf_param, csrf_token); + fetch(entry.data("href"), { method: "POST", - data: params, - success: function (html) { + body: params + }) + .then(response => response.text()) + .then(function (html) { entry.html(html); // go to first result of first geocoder if (index === 0) { @@ -146,8 +145,7 @@ OSM.Search = function (map) { panToSearchResult(firstResult.data()); } } - } - }); + }); }); return map.getState(); diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index 1324532d3..b10101721 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -265,9 +265,7 @@ L.OSM.Map = L.Map.extend({ this.removeObject(); if (object.type === "note" || object.type === "changeset") { - this._objectLoader = { - abort: function () {} - }; + this._objectLoader = { abort: () => {} }; this._object = object; this._objectLayer = L.featureGroup().addTo(this); @@ -295,10 +293,13 @@ L.OSM.Map = L.Map.extend({ this.fire("overlayadd", { layer: this._objectLayer }); } else { // element handled by L.OSM.DataLayer var map = this; - this._objectLoader = $.ajax({ - url: OSM.apiUrl(object), - dataType: "json", - success: function (data) { + this._objectLoader = new AbortController(); + fetch(OSM.apiUrl(object), { + headers: { accept: "application/json" }, + signal: this._objectLoader.signal + }) + .then(response => response.json()) + .then(function (data) { map._object = object; map._objectLayer = new L.OSM.DataLayer(null, { @@ -320,8 +321,8 @@ L.OSM.Map = L.Map.extend({ if (callback) callback(map._objectLayer.getBounds()); map.fire("overlayadd", { layer: map._objectLayer }); - } - }); + }) + .catch(() => {}); } },