Question

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

需要从函数中返回一个承诺。这是我第一次处理承诺。有人可以指导我如何从下面的我的代码

中返回正确的承诺

我有一个如下的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()
        });
    }
)

Answer 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();

<ul id="BookList"></ul>

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

1 个答案: