whatwg-request

whatwg-request

简介

目前网络请求库已经足够多了，例如最火爆的 Axios、$ajax 生态非常成熟，不管是兼容还是功能都非常丰富，在实战项目中是不二之选。然而，不管是 axios 还是 $ajax 底层都是基于 XMLHttpRequest 技术来实现的网络请求。随着 Fetch 下一代Ajax技术兴起，它采用Promise方式来处理数据。是一种简洁明了的API，比XMLHttpRequest更加简单易用等特点。因此 whatwg-request 就应运而生，其核心是基于 whatwg-fetch 实现的，并且提供 request、get、post、fetch等多个语法糖方法，压缩后大小只有几kb；在兼容方面，优先通过 Fetch 原生方法进行网络请求，在不兼容情况下自动降级采用 XMLHttpRequest 来进行通信。如果你只需要一个很简单的网络请求，并且追求极致的代码量，那么 whatwg-request 就很适合你哦～

安装

npm install whatwg-request --save

yarn add whatwg-request

Request 示例

request(config) 通过 config 配置参数。详情见 RequestOptions 请求参数指南

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) 方法第一个参数请求地址 url；第二个可选参数是请求入参，会自动拼接在 url 后面；第三个可选参数是其他配置，例如 headers 等等

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) 方法第一个参数请求地址 url；第二个可选参数是请求体；第三个可选参数是其他配置，例如 headers 等等

import { post } from "whatwg-request";

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

RequestOptions 请求参数指南

{
  // `url` 是用于请求的服务器 URL
  url: '/user',
  // `method` 是创建请求时使用的方法
  method: 'get', // default
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` 是即将与请求一起发送的 URL 参数
  params: {
    ID: 12345
  },
  // `data` 是作为请求主体被发送的数据
  data: {
    firstName: 'Fred'
  },
  // `cache` 如何处理缓存
  cache: 'default',
  // `mode` 请求的模式
  mode: 'cors',
  // `credentials` 是否发送 Cookie
  credentials: 'same-origin',
  // ...... 
}

通过 post 或者 get 方法，只需考虑服务器地址url和请求参数就可以进行网络请求。如果需要配置更多选项，则可以通过第三入参项进行配置