Javascript 从API源检索数据并使用js形成下拉列表时出现问题

我试图理解js中的这个

Promise/fetch

东西

'use strict'
  const list = document.querySelector('.list');
    function test() {
      return fetch('https://swapi.dev/api/films/', {
        method: 'GET'
      });
    }      
    list.addEventListener('click', event => {
      console.log('TEST');
      alert("TEST");
     });
     test()
     .then( function(response) {
       return response.json();  
      })
      .then(function(data) {
        data.results.forEach(function(episode) {
        const ul = document.createElement('ul');
        ul.innerHTML = episode.title;
        list.append(ul); 
       })
     })

我需要从

下拉列表中，从《星球大战》的所有剧集（完成）中，以及更多的剧集（麻烦开始的部分），通过
点击剧集上的
，它必须
返回该剧集中使用的船的列表

正如您从上面的链接代码中所看到的那样-我能够正确返回剧集列表，但我只是不知道如何创建下拉菜单当前我没有主意，我是否应该制作一个
ul li
列表，其中
ul
-剧集和
ul
-发货

我很难弄明白这一点，欧比·凡，你是我最后的希望。
首先，你所做的不是下拉列表，而是常规列表。使用
标记

  <select id="episodes" class="list"></select>

现在我们需要一个点击处理程序。但在实现它之前，让我们先对test（）函数进行重构，给它起一个合适的名称，并使其更通用，这样您就可以在两个请求中重用它：
现在单击处理程序：
实现
requestStartshipNames
将涉及多个请求（每个starshipUrl一个请求）。要同步获取所有数据，让我们使用
Promise.all
：
现在要渲染星际飞船列表，您需要实现
renderStartshipList
函数：
当然，您需要重构自己的代码，以便将其与新的
apiGetRequest
实用程序函数、新的单击处理程序和新的标记相匹配

祝你好运
 首先，您所做的不是下拉列表，而是常规列表。使用
标记

  <select id="episodes" class="list"></select>

现在我们需要一个点击处理程序。但在实现它之前，让我们先对test（）函数进行重构，给它起一个合适的名称，并使其更通用，这样您就可以在两个请求中重用它：
现在单击处理程序：
实现
requestStartshipNames
将涉及多个请求（每个starshipUrl一个请求）。要同步获取所有数据，让我们使用
Promise.all
：
现在要渲染星际飞船列表，您需要实现
renderStartshipList
函数：
当然，您需要重构自己的代码，以便将其与新的
apiGetRequest
实用程序函数、新的单击处理程序和新的标记相匹配

祝你好运
 太多了！如果我想建立一个包含插曲点击事件的常规列表，我应该避免使用select标记的第一部分，坚持您的计划并重构我的代码，对吗？在这一部分我还收到了警告“return fetch（url，method:'GET'）。然后（response=>response.json（））}``试图重构我自己的代码来使用它-根本不起作用，很麻烦。@WizardRew什么样的警告？太多了！如果我想建立一个包含插曲点击事件的常规列表，我应该避免使用select标记的第一部分，坚持您的计划并重构我的代码，对吗？在这一部分我还收到了警告“return fetch（url，method:'GET'）。然后（response=>response.json（））}``试图重构我自己的代码来使用它-根本不起作用，很麻烦。@WizardRew什么样的警告？
  <select id="ships" class="list"></select>

const nameOfEpisode = event.target.value;
const requestUrl = "https://swapi.dev/api/films/?search=${nameOfEpisode}";

function apiGetRequest(url) {
  return fetch(url, method: 'GET').then(response => response.json())
}

function requestShips(event) {
  const nameOfEpisode = event.target.value;
  const requestUrl = `https://swapi.dev/api/films/?search=${nameOfEpisode}`;
  apiGetRequest(requestUrl).then(data => {
    const { starshipsUrls } = data[0];
    return starshipsUrls;
   }).then(requestStartshipNames)
   .then(renderStartshipList);
 }

function requestStartshipNames(starshipUrls){
  return Promise.all(starshipUrls.map(url => apiGetRequest(url)));
}

function renderStartshipList(starships){
  const startShipsList = document.querySelector('#ships');
  const starcheepsNames = starships.map(({ name }) => {
    const option = document.createElement('option');
    option.innerHTML = name;
    startShipsList.append(option); 
 })            
}