whatwg-request

Introduction

At present, there are enough network request libraries. For example, the most popular Axios and $Ajax ecosystems are very mature. They are very rich in compatibility and functions, and are the best choice in practical projects. However, whether it's Axios or $Ajax, the underlying layer is a network request based on XMLHttpRequest technology. With the rise of the fetch next generation Ajax technology, it uses the Promise method to process data. It is a concise API, which is simpler and easier to use than XMLHttpRequest. Therefore, whatwg request came into being. Its core is the version of Typescript implemented with reference to whatwg fetch, and provides multiple syntax sugar methods such as request,get,post,fetch, and the compressed size is only a fewKB; In terms of compatibility, priority is given to network requests through the fetch native method. In case of incompatibility, it will be automatically degraded and XMLHttpRequest is used for communication. If you only need a very simple network request and pursue the ultimate amount of code, then whatwg request is very suitable for you.

📦 Install

npm install whatwg-request --save

yarn add whatwg-request

Request

request(config) Configure parameters through config. See the requestoptions request parameter guide for details

import request from "whatwg-request";

const App = () => {
    useEffect(() => {
        // request 
        request({
            url: '/api/request',
            method: 'post',
            data: {
                a: '123'
            }
        }).then(res => {
            console.log(res)
        })
    },[])
    return <div></div>
};

Get

get(url,params,options) Method first parameter request address URL; The second optional parameter is the request input parameter, which will be automatically spliced after the URL; The third optional parameter is other configurations, such as headers and so on

import { get } from "whatwg-request";

const App = () => {
    useEffect(() => {
        // get 
        get('/api/get',{
            a: '123'
        }, { 
            mode: 'same-origin' 
        }).then(res => {
            console.log(res)
        })
    },[])
    return <div></div>
};

Post

post(url,data,options) Method first parameter request address URL; The second optional parameter is the request body; The third optional parameter is other configurations, such as headers and so on

import { post } from "whatwg-request";

const App = () => {
    useEffect(() => {
        // post 
        post('/api/post',{
            a: '123'
        }).then(res => {
            console.log(res)
        })
    },[])
    return <div></div>
};

RequestOptions

{
  url: '/user',
  method: 'get', // default
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  params: {
    ID: 12345
  },
  data: {
    firstName: 'Fred'
  },
  cache: 'default',
  mode: 'cors',
  credentials: 'same-origin',
  ......
}

Through the post or get method, the network request can be made only by considering the server address, URL and request parameters. If more options need to be configured, they can be configured through the third input parameter.