# 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. Howeve

Latest version **1.2.0** (published 2024-04-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install whatwg-request
pnpm add whatwg-request
yarn add whatwg-request
bun add whatwg-request
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-04-30 |
| First published | 2022-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 62.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wangwenshan |
| Maintainers | wangwenshan |

## Links

- npm: https://www.npmjs.com/package/whatwg-request
- Repository: https://gitee.com/ws18250840411/whatwg-request
- npm.io page: https://npm.io/package/whatwg-request

## Dependencies (2)

- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.6.2
- [abortcontroller-polyfill](https://npm.io/package/abortcontroller-polyfill.md) ^1.7.5

## Recent versions

- 1.2.0 (latest) — 2024-04-30
- 1.1.9 — 2024-04-30
- 1.1.8 — 2024-03-27
- 1.1.7 — 2023-05-17
- 1.1.6 — 2023-05-17
- 1.1.5 — 2023-03-01
- 1.1.4 — 2023-03-01
- 1.1.3 — 2023-02-27
- 1.1.2 — 2022-08-31
- 1.1.1 — 2022-05-09
- 1.1.0 — 2022-05-07
- 1.0.2 — 2022-05-07
- 1.0.1 — 2022-05-07
- 1.0.0 — 2022-05-05

## README

# 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` 就很适合你哦～

### 📦 安装

```bash
npm install whatwg-request --save
```

```bash
yarn add whatwg-request
```

### Request 示例

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

```jsx
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 等等

```jsx
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 等等

```jsx
import { post } from "whatwg-request";

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

## RequestOptions 请求参数指南

```json
{
  // `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和请求参数就可以进行网络请求。如果需要配置更多选项，则可以通过第三入参项进行配置

---
_Source: https://npm.io/package/whatwg-request · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._