Вторая выборка в последовательности из двух, похоже, не имеет доступа к данным, возвращенным из первой выборки

Я хочу запросить у сервера (django) схему (RESTful) API, а затем использовать эту схему для последующих операций со списками и CRUD, которые могут быть определены в ней. Я использую OpenAPI для автоматической генерации схемы на стороне сервера. Попытка заставить работать API на стороне клиента заняла слишком много времени, поэтому я переключился на использование fetch вместо этого.

Первая выборка попадает в конечную точку, которая обслуживает схему API, и работает нормально.

Проблема возникает, когда я пытаюсь разыменовать строку в возвращаемой схеме в моем втором вызове fetch - этот вызов для получения списка объектов "widget" с моего сервера.

Я нашел способ преодолеть это, просто присвоив нужную мне строку другой const внутри той же функции, а затем передав ее во второй fetch.

Это работает, но я не понимаю, зачем мне это нужно, чтобы иметь возможность использовать данные из первого вызова. Я могу сослаться на него, сделав ссылку console.log. Я могу увидеть его с помощью отладочной консоли браузера. Но по какой-то причине ссылка на что-либо в объекте, возвращенном первым вызовом, становится неопределенной во втором (или любом последующем?) вызове.

Может ли кто-нибудь, кто хорошо разбирается во внутреннем устройстве javascript, объяснить это или хотя бы указать мне на что-то, что может это объяснить? Спасибо!

Ниже я включил код, который был немного очищен. (Очевидно, что я не имею дело с "виджетами".)

// given: a server hosting a "Widget" model, with an OpenAPI
//        RESTful API ...
// we want to retrieve a list of "Widget" objects via the "wigets"
// "list" API endpoint.
async function fetchApi_works() {

  // *** This part works ...
  const api = await fetch('http://localhost:8000/openapi/')
                           .then(r => r.json())
                           .catch(err => {
                                  console.log(err);
                               });
  console.log(api);                      // JSON data for API
  console.log(api.widgets.list.url);     // URL for retrieving list of stores
                                         // Note: NOT undefined

  const server = 'http://localhost:8000';

  // *** This does NOT work ... api.widgets.list.url appears to be undefined.
  const widgets1 = await fetch(server + api.widgets.list.url)
                        .then(r => r.json())
                        .catch(err => {
                            console.log(err.message);  // ** Comes here:  "undefined"
                        });
  
  // *** This works ...
  const widget_api = api.stores.list.url;  // This seems to be the difference.
   
  const widget = await fetch(server + widget_api)
                        .then(r => r.json())
                        .catch(err => {
                            console.log(err.message);
                        });
  console.log(widgets);
}

fetchApi_works();

Вернуться на верх