service-fetch

Provides the fetch API through a web worker

idleberg

4,880

1

Bug Reports

0.3.8

MIT

GitHub

This package provides the following services:

service-fetch

Provides the fetch API through a web worker

License Release Downloads CI

Installation

Package Manager

Install service-fetch from the editor's Package Manager or the command-line equivalent:

$ ppm install service-fetch || apm install service-fetch

Using Git

Change to your 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
$ ppm install || apm install

Build source:

$ ppm run build || apm 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