复制以承诺和xhr语言 - JavaScript的方式复制提取

Question

我想创建自己的fetch函数，以了解更好的xmlhttprequest，promises和异步/等待。

当我遇到错误时（）

，这似乎并没有回报承诺

const fakeFetch = url => {
	const xhr = () => new Promise((resolve, reject) => {
		try {
			const x = new XMLHttpRequest();
			x.onreadystatechange = function() {
				const { readyState, status } = this;
				if (readyState === 4 && status === 200) {
					resolve(x.responseText);
				}
			}
			x.open('get', url);
			x.send();
		} catch(e) {
			reject(e);
		}
	})
	const _fetch = () => new Promise(async (resolve, reject) => {
		try {
			const response = await xhr();
			if (response !== undefined) resolve(response);
		} catch(e) {
			reject(e);
		}
	})
	_fetch();
}
fakeFetch('https://api.github.com/users')
.then(data => data.json())
.then(data => console.log(data));

Answer 1

您将async关键字放在错误的位置，应该在这里：

let p = new Promise(async (resolve, reject) => {
                    ^^^^^

和 await的功能，它必须返回承诺：（但是在这种用例中，您实际上不需要await）

const fakeFetch = url => {
  const xhr = () => new Promise((resolve, reject) => {
    try {
      const x = new XMLHttpRequest();
      x.onreadystatechange = function() {
        const {
          readyState,
          status
        } = this;
        if (readyState === 4 && status === 200) {
          resolve(x.responseText);
        }
      }
      x.open('get', url);
      x.send();
    } catch (e) {
      reject(e);
    }
  })
  const _fetch = () => new Promise((resolve, reject) => {
    try {
      const response = xhr();
      if (response !== undefined) resolve(response);
    } catch (e) {
      reject(e);
    }
  })
  return _fetch();
}
fakeFetch('https://api.github.com/users')
  .then(data => console.log(data));