时间戳

首页 > 解决方案 > 使用 XHR 的异步请求

javascript - 使用 XHR 的异步请求

问题描述

我需要编写异步请求以在搜索输入中找到相应的文章。我使用 Unplash.com 和纽约时报的 API。代码在开发工具中没有显示任何错误。我附上了codepen链接：

Codepen 演示

(function(){
  const form = document.querySelector('#search-form');
  const searchField = document.querySelector('#search-keyword');
  let searchedForText;
  const responseContainer = document.querySelector('#response-container');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    responseContainer.innerHTML = '';

    function addArticles () {}

    function addImage() {}

   const imgRequest = new XMLHttpRequest();
   imgRequest.onload = addImage;
   imgRequest.onerror = function(err) {
     requestError(err, 'image');
   };
   imgRequest.open('GET', `https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`);
   imgRequest.setRequestHeader('Authorization', 'Client-ID <27182>');
   imgRequest.send();

   const articleRequest = new XMLHttpRequest();
   articleRequest.onload = addArticles;
   articleRequest.onerror = function (err) {
     requestError(err, 'articles');
   }
   articleRequest.open('GET', 
   `http://api.nytimes.com/svc/search/v2/articlesearch.json? 
   q=${searchedForText}&api-key=<4c32dbc91636470fb8e286e60041dca5>`);
   articleRequest.send();

  });
});

标签： javascriptajaxasynchronousxmlhttprequesthttprequest

解决方案

推荐阅读