使用 Fetch API 时无法读取未定义错误的属性答案

【问题标题】：Cannot read property then of undefined error while using Fetch API使用 Fetch API 时无法读取未定义错误的属性
【发布时间】：2018-12-15 09:59:21
【问题描述】：

我正在使用 Fetch Api 开发 javascript 来测试输出。但是当我尝试测试代码时，我收到以下错误无法读取未定义的属性“then”。

需要从函数返回一个承诺。这是我第一次致力于promises。有人可以指导我如何从我的以下代码中返回正确的承诺

我有一个类似下面的 javascript 方法

function getBooks() {
  fetch("http://localhost:3000/books").then(response = > {
    if (response.status == 200) {
      return Promise.resolve(response.json());
    } else {
      return Promise.reject(new error("Failed to get resonse"));
    }
  }).then(bookResponse = > {
    const bookListUL = document.getElemtnById('BookList');
    let bookInnerHTML = ' ';
    bookResponse.forEach(book => {
      bookInnerHTML += '<li>...</li>'
    });
    return bookListUL.innerHTML = bookInnerHTML ;
  });
}

在我的测试脚本中，它的调用类似于

it('api should return correct response', (done) => {
      fetchMock.get('http://localhost:3000/books', bookTestData); //bookTestData is a json object with book details

      script.getBooks().then(res => {
          expect(fetchmock.lastUrl()).to.equal('http://localhost:3000/books');
          expect(res).to.deep.equal(bookTestData);
          done();
        })
        .catch(err => {
          expect(err).to.equal(null, err);
          done()
        });
    }
)

【问题讨论】：

response.json() 返回一个 Promise，你不需要返回 return Promise.resolve(response.json()); 只需执行 return response.json()。
另外，= > 之间不能有空格。
同样bookResoponse应该是bookResponse
@zero298 和 Eric 是错字，我更正并更新了我的问题，谢谢
这个错误到底发生在哪里？在您的测试中还是在您的实际代码中？

标签： javascript fetch-api

【解决方案1】：

您的代码中有几个错误：

response.json() 返回一个Promise，你不需要返回一个解析为 Promise 的 Promise，只需返回 Promise
= > 之间应该没有空格，应该是=>
你拼错了bookResoponse

见以下代码：

function getBooks() {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => {
      if (response.status == 200) {
        return response.json();
      } else {
        return Promise.reject(new error("Failed to get resonse"));
      }
    })
    .then(bookResponse => {
      const bookListUL = document.getElementById('BookList');
      bookResponse.forEach(book => {
        const el = document.createElement("li");
        el.innerHTML = book.title;
        bookListUL.appendChild(el);
      });
    })
    .catch(err => console.error(err));
}

getBooks();

&lt;ul id="BookList"&gt;&lt;/ul&gt;

【讨论】：