# Simple JavaScript API wrapper

DevFeed: [Simple JavaScript API wrapper](<https://devfeed.tech/articles/simple-javascript-api-wrapper-37352.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/simple-javascript-api-wrapper/>)

Author: Stanko

Published: 2017-12-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [API](<https://devfeed.tech/topics/api.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [fetch](<https://devfeed.tech/topics/fetch.md>), [Promise](<https://devfeed.tech/topics/promise.md>), [HTTP](<https://devfeed.tech/topics/http.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [javascript-api](<https://devfeed.tech/tags/javascript-api.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>)

## AI overview

A tutorial presenting a reusable JavaScript API wrapper built around native fetch. It explains parsing successful responses, converting HTTP failures and unresolved requests into custom errors, and handling the returned Promise. The code is provided as a native ES2015 module with usage examples and a CodePen demo using the Star Wars API.

## Source excerpt

For handling API calls I have a small snippet I'm copying from project to project. I decided to clean it up, make more generic and share it. It is intended to be a starting point, so you might want to customize it to your custom needs. What it does? # It is a simple wrapper around native fetch.If you need a polyfill isomorphic-fetch is a great one. For successful requests it will parse the response and return it. When HTTP error occursIt detects errors based on request's HTTP status. it will throw a custom error with status code, error message and response (parsed if it is a JSON). If request never gets resolved, same custom error will be thrown but response will be set to null and status code to REQUEST_FAILED. Please note that function will return a Promise so you need to handle how it resolves. Code # It is written as a native ES2015 module, which means you may need to transpile it depending on your browser support policy. // ------------------------------------------------------ // // Simple JavaScript API wrapper // https://muffinman.io/blog/simple-javascript-api-wrapper // ------------------------------------------------------ // // For demo purposes I'm using this awesome Star Wars API const API_URL = 'https://swapi.tech/api'; // Custom API error to throw function ApiError(message, data, status) { let response = null; let isObject = false; // We are trying to parse response try { response = JSON.parse(data); isObject = true; } catch (e) { response = data; } this.response = response; this.message = message; this.status = status; this.toString = function () { return `${ this.message }\nResponse:\n${ isObject ? JSON.stringify(this.response, null, 2) : this.response }`; }; } // API wrapper function const fetchResource = (path, userOptions = {}) => { // Define default options const defaultOptions = {}; // Define default headers const defaultHeaders = {}; const options = { // Merge options ...defaultOptions, ...userOptions, // Merge headers headers: { ...defaultHea