service-fetch

Provides the fetch API through a web worker

Installation

apm

Install service-fetch from Atom install view or use the command-line equivalent:

$ apm install service-fetch

Using Git

Change to your Atom packages directory:

Windows

# Powershell
$ cd $Env:USERPROFILE\.atom\packages

:: Command Prompt
$ cd %USERPROFILE%\.atom\packages

Linux & macOS

$ cd ~/.atom/packages/

Clone the repository as service-fetch:

$ git clone https://github.com/idleberg/atom-service-fetch service-fetch

Install dependencies:

$ cd service-fetch && npm install

Build source:

$ npm run build

Usage

This is an experiment

Have you ever thought that your Atom package should perform HTTP requests using web workers? Would it be great if you could use the standard Fetch API and something would handle the web worker part for you?

This package is service provider that aims to achieve that. You use a common interface, the services handles the rest. Let's take a look at this through an example implementation.

To consume the service in your package, add the following to your package.json:

"consumedServices": {
  "service-fetch": {
    "versions": {
      "0.2.0": "consumeFetch"
    }
  }
},
"package-deps": [
  {
    "name": "service-fetch"
  }
]

Install atom-package-deps to handle the package dependency and any fetch implementation for NodeJS as a fallback for when the service is unavailable:

Example:

npm install atom-package-deps cross-fetch

Next up, let's create a package:

import { CompositeDisposable, Disposable } from 'atom';
import crossFetch from 'cross-fetch';
 
export default {
  // Fallback implementation for when the service is unavailable
  fetch: crossFetch,
 
  // Consume the service
  consumeFetch(fetchService) {
    this.fetch = fetchService;
 
    return new Disposable(() => {
      this.fetch = null;
    });
  },
 
  // Optional: Add a demo command
  activate() {
    this.subscriptions = new CompositeDisposable();
 
    this.subscriptions.add(
      atom.commands.add('atom-workspace', {
        "my-package:fetch-demo": async () =>
          await this.demoCommand(),
      })
    );
  },
 
  async demoCommand() {
    const response = await this.fetch('https://atom.io/api/packages', {
      headers: {
        'Accept': 'application/json'
      }
    });
 
    console.log(await response.json());
  }
};

Due to the limitations of event messages, the response only contains the method matching the Accept header:

Accept	Response Method
application/json	response.json()
application/octet-stream	response.arrayBuffer()
multipart/form-data	response.formData()
text/*	response.text()

When no Accept header has been specified, application/json will be used as default.

Again, this is an experiment. I'm not sure where this is going, but I'm looking forward to your feedback!

License

This work is licensed under the MIT License