使用 promises 和 xhr 复制 fetch - JavaScript

Question

I want to create my own fetch function to understand better XMLHttpRequest, Promises and Async/Await.

It doesn't seem like it's returning a promise as I get errors with then()

 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

you're putting the async key word in the wrong place, it should be here :

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

And to await for a function, it has to return a Promise : ( But in this use case you don't really need to 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)); 

Answer 2

您只需要返回_fetch（）而不是仅仅执行它，并且由于XMLHttpRequest返回的是responseText，那么您无需在then中解析json