I've written an ES6 function using the new fetch() API and returning a new resolved promise with a data object or a rejected promise with an error subclass.
I'm pretty new to both ES6 and Promises, and it looks a little unwieldy, so I'm wondering if there's a better way. I'm also wondering about how this relates to the "explicit promise construction antipattern" "explicit promise construction antipattern".
Any suggestions for how to improve or simplify?
function get(url) {
console.log('Making fetch() request to: ' + url);
let promise = new Promise((resolve, reject) => {
fetch(url).then(response => {
if (response.ok) {
const contentType = response.headers.get('Content-Type') || '';
if (contentType.includes('application/json')) {
response.json().then(obj => {
resolve(obj);
}, error => {
reject(new ResponseError('Invalid JSON: ' + error.message));
});
} else if (contentType.includes('text/html')) {
response.text().then(html => {
resolve({
page_type: 'generic',
html: html
});
}, error => {
reject(new ResponseError('HTML error: ' + error.message));
});
} else {
reject(new ResponseError('Invalid content type: ' + contentType));
}
} else {
if (response.status == 404) {
reject(new NotFoundError('Page not found: ' + url));
} else {
reject(new HttpError('HTTP error: ' + response.status));
}
}
}, error => {
reject(new NetworkError(error.message));
});
});
return promise;
}I've written an ES6 function using the new fetch() API and returning a new resolved promise with a data object or a rejected promise with an error subclass.
I'm pretty new to both ES6 and Promises, and it looks a little unwieldy, so I'm wondering if there's a better way. I'm also wondering about how this relates to the "explicit promise construction antipattern".
Any suggestions for how to improve or simplify?
function get(url) {
console.log('Making fetch() request to: ' + url);
let promise = new Promise((resolve, reject) => {
fetch(url).then(response => {
if (response.ok) {
const contentType = response.headers.get('Content-Type') || '';
if (contentType.includes('application/json')) {
response.json().then(obj => {
resolve(obj);
}, error => {
reject(new ResponseError('Invalid JSON: ' + error.message));
});
} else if (contentType.includes('text/html')) {
response.text().then(html => {
resolve({
page_type: 'generic',
html: html
});
}, error => {
reject(new ResponseError('HTML error: ' + error.message));
});
} else {
reject(new ResponseError('Invalid content type: ' + contentType));
}
} else {
if (response.status == 404) {
reject(new NotFoundError('Page not found: ' + url));
} else {
reject(new HttpError('HTTP error: ' + response.status));
}
}
}, error => {
reject(new NetworkError(error.message));
});
});
return promise;
}I've written an ES6 function using the new fetch() API and returning a new resolved promise with a data object or a rejected promise with an error subclass.
I'm pretty new to both ES6 and Promises, and it looks a little unwieldy, so I'm wondering if there's a better way. I'm also wondering about how this relates to the "explicit promise construction antipattern".
Any suggestions for how to improve or simplify?
function get(url) {
console.log('Making fetch() request to: ' + url);
let promise = new Promise((resolve, reject) => {
fetch(url).then(response => {
if (response.ok) {
const contentType = response.headers.get('Content-Type') || '';
if (contentType.includes('application/json')) {
response.json().then(obj => {
resolve(obj);
}, error => {
reject(new ResponseError('Invalid JSON: ' + error.message));
});
} else if (contentType.includes('text/html')) {
response.text().then(html => {
resolve({
page_type: 'generic',
html: html
});
}, error => {
reject(new ResponseError('HTML error: ' + error.message));
});
} else {
reject(new ResponseError('Invalid content type: ' + contentType));
}
} else {
if (response.status == 404) {
reject(new NotFoundError('Page not found: ' + url));
} else {
reject(new HttpError('HTTP error: ' + response.status));
}
}
}, error => {
reject(new NetworkError(error.message));
});
});
return promise;
}Using fetch() and a new Promise object to get API results
I've written an ES6 function using the new fetch() API and returning a new resolved promise with a data object or a rejected promise with an error subclass.
I'm pretty new to both ES6 and Promises, and it looks a little unwieldy, so I'm wondering if there's a better way. I'm also wondering about how this relates to the "explicit promise construction antipattern".
Any suggestions for how to improve or simplify?
function get(url) {
console.log('Making fetch() request to: ' + url);
let promise = new Promise((resolve, reject) => {
fetch(url).then(response => {
if (response.ok) {
const contentType = response.headers.get('Content-Type') || '';
if (contentType.includes('application/json')) {
response.json().then(obj => {
resolve(obj);
}, error => {
reject(new ResponseError('Invalid JSON: ' + error.message));
});
} else if (contentType.includes('text/html')) {
response.text().then(html => {
resolve({
page_type: 'generic',
html: html
});
}, error => {
reject(new ResponseError('HTML error: ' + error.message));
});
} else {
reject(new ResponseError('Invalid content type: ' + contentType));
}
} else {
if (response.status == 404) {
reject(new NotFoundError('Page not found: ' + url));
} else {
reject(new HttpError('HTTP error: ' + response.status));
}
}
}, error => {
reject(new NetworkError(error.message));
});
});
return promise;
}