Using fetch API and promise to call restful interface for post

Time:2021-2-27

Basic Concept

Promise

Overview

  • Promise is a js standard built-in object.

  • Promise is used for asynchronous computations.

  • A Promise represents a value which may be available now, or in the future, or never.

  • A Promise is in one of these states:

    • pending: initial state, not fulfilled or rejected.

    • fulfilled: meaning that the operation completed successfully.

    • rejected: meaning that the operation failed.

  • As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.

Definition

Syntax
new Promise( /* executor */ function(resolve, reject) { ... });
Parameters
  • executor

    • A function normally initiates some asynchronous work, and then, once that completes, either calls the resolve function to resolve the promise or else reject it if an error occurred.

    • If an error is thrown in the executor function, the promise is rejected. The return value of the executor is ignored.

    • Because the work is an asynchronous work, you may use XHR or Fetch in it.

Methods
  • reject(reason) – return a promise with the given reason.

  • resolve(value) – return a promise that is resolved with the given value. The value maybe a promise too, if it is, chain the result with then method again.

Prototype Methods
  • prototype.catch(onRejected) – onRejected is a callback function to handle the situation that is on rejected.

  • prototype.then(onFulfilled, onRejected) – OnRejected is as the below catch method. OnFulfilled is a callback function to handle the situation that is on fulfilled.

FormData

Overview

  • The FormData interface provides a way to easily construct a set of key/value pairs representing from fields and their values, which can then be easily sent using asynchronous way(XHR or Fetch).

  • It uses the same format a form would use if the encoding type were set to “multipart/form-data“.

Definition

Constructor
  • FormData()
    Create a new FormData object.

Methods
  • append()

  • delete()

  • entries()

  • get()

  • getAll()

  • has()

  • keys()

  • set()

  • values()

Fetch API

Overview

  • The Fetch API provides an interface for fetching resources(including across the network).

  • It will seem familiar to anyone who has used XHR, but the new API provides a more powerful and flexible feature set.

Definition

Interfaces
  • GlobalFetch

    • fetch()

  • Headers

  • Request

    • implement Body

  • Response

    • implement Body

Mixin
  • Body

    • json()
      Takes a Response stream and reads it to completion.It Returns a promise that resolves with a JSON object. This processing is asynchronous, so the return is a promise. In addition, fetch itself is an asynchronous operation, so the response is naturally a promise. )

Restful API Design

  • Using post to create a resource often requires authentication. You need to put the authentication token in the request header and the creation data in the request body to send. The token should be placed in the ‘authorization’ field of the header, and the type of ‘bearer’ should be added in front of it. The created data is often put into the formdata, and then the formdata is put into the body.

  • If the returned result is data in JSON format, the value of ‘accept’ field in header should be written as’ application / JSON ‘

WorkFlow

  1. Get token from localStorage to post a image by fetch API.(assume the token is there.)

  2. Get the remote url of the image in response.

  3. Show image.

Demo

https://jsfiddle.net/clemTheD…

Reference

Promise
Fetch
FormData