如何进行链式抓取，并在每个步骤可用时显示结果？

Question

我从API获取文章列表数据，并使用/fetch Unsplash API根据获取的每个文章标题获取相关图像。

这是我的代码：

let url = 'http://127.0.0.1:8000/api';

async function getData(url) {
    const res = await fetch(url);
    const objects = await res.json();

    await Promise.all(objects.map(async (object) => {
        const res = await fetch('https://api.unsplash.com/search/photos?client_id=XXX&content_filter=high&per_page=1&query=' + object.title);
        const image = await res.json();
        object.image_url = image.results[0].urls.small
        object.image_alt = image.results[0].alt_description
    }));
}

let articles_1 = getData(url + '/articles/index/1/');
let articles_2 = getData(url + '/articles/index/2/');
let articles_3 = getData(url + '/articles/index/3/');

我在同一个页面上同时显示了三个不同的类别。这就是为什么我调用该函数三次的原因。

问题：

当此函数生效时，在获取文章数据和图像后显示结果。但为了缩短用户等待时间，我想先在获取时显示文章数据，然后在获取时显示图像。无论是Svelte响应式声明还是纯Javascript，我如何实现它？

Answer 1

您可能希望将这两个函数分开，以便可以按顺序调用它们。

const endpoint = 'http://127.0.0.1:8000/api';

const getArticles = async (url) => {
    return fetch(url).res.json();
};
const renderArticles = async (articles) => {
    // render article set and return it as a DOM object
    return articlesDOM;
};

const getImageForArticle = async (articleNode) => {
    const res = await = fetch('https://api.unsplash.com/search/photos?client_id=XXX&content_filter=high&per_page=1&query=' + object.title);
    const img = new Image();
    img.src = res.results[0].urls.small;
    img.alt = res.results[0].alt_description;
    return {img, articleNode};
};
const renderImage = async (stuff) => {
    const {img, articleNode} = stuff;
    // inject your img into your article
};

// now call in sequence

getArticles(endpoint+'/articles/index/1/').then(renderArticles).then(articleNodes => {
    const promises = articleNodes.map(articleNode => {
        return getImageForArticle(articleNode).then(renderImage);
    });
    return Promise.all(promises);
});

Answer 2

虽然我不能完全确定你在尝试做什么(我没有一个最小的工作示例)，但这里是我最好的尝试：

var url = 'http://127.0.0.1:8000/api';

async function getData(url) {
  var data = fetch(url)
    .then(data => data.json())
  
  await data.then(data => ArticleFunc(data))
  
  await data.then(function(data) {
      data.map(function(object) {
        fetch('https://api.unsplash.com/search/photos?client_id=XXX&content_filter=high&per_page=1&query=' + object.title)
          .then(data => data.json())
        object.image_url = image.results[0].urls.small
        object.image_alt = image.results[0].alt_description
        ImageFunc(object)
      })
    })
}

function ArticleFunc(data){
  //display article
}

function ImageFunc(data){
  //display image
}

getData(url + '/articles/index/1/');
getData(url + '/articles/index/2/');
getData(url + '/articles/index/3/');

请注意，这将被视为伪代码，同样，由于缺少最小的工作示例，它未经过测试。