# @alanojs/net

> - 使用 npm:

Latest version **0.0.10** (published 2022-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alanojs/net
pnpm add @alanojs/net
yarn add @alanojs/net
bun add @alanojs/net
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2022-03-04 |
| First published | 2022-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | jianzi0307@gmail.com |
| Maintainers | jianzi0307 |
| Keywords | websocket, http, axios |

## Links

- npm: https://www.npmjs.com/package/@alanojs/net
- npm.io page: https://npm.io/package/@alanojs/net

## Dependencies (4)

- [qs](https://npm.io/package/qs.md) ^6.10.3
- [axios](https://npm.io/package/axios.md) ^0.26.0
- [@alanojs/tools](https://npm.io/package/@alanojs/tools.md) ^0.0.10
- [@alanojs/storage](https://npm.io/package/@alanojs/storage.md) ^0.0.5

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.0.10 (latest) — 2022-03-04
- 0.0.9 — 2022-03-01
- 0.0.8 — 2022-03-01
- 0.0.7 — 2022-02-17
- 0.0.4 — 2022-02-16
- 0.0.3 — 2022-02-16
- 0.0.2 — 2022-02-15

## README

# 安装

- 使用 npm:

```
npm i @alanojs/net
```

- 使用 pnpm:

```
pnpm i @alanojs/net
```

- 使用 yarn:

```
yarn add @alanojs/net
```

# Http 使用示例

- 插件方式

```javascript
import Http from "@alanojs/net";
import { Message } from "element-ui";
import router from "../router";

Vue.use(Http, {
  gateWay: "http://localhost:8080",
  timeout: 5000,
  withCredentials: false,
  // 路由跳转
  router,
  // 提示组件
  toast: Message,
  // 持久化类型：可选localStorage、cookie、sessionStorage
  storageType: "localStorage",
});
```

- 可通过继承方式扩展

```javascript
import { HttpClient } from "@alanojs/net";
import { Message } from "element-ui";
import router from "../router";

class Request extends HttpClient {
  // 覆写配置项
  getOptions() {
    return {
      gateWay: "http://localhost:8080",
      timeout: 5000,
      withCredentials: false,
      // 路由跳转
      router,
      // 提示组件
      toast: Message,
      // 持久化类型：可选localStorage、cookie、sessionStorage
      storageType: "localStorage",
    };
  }

  // 覆写请求拦截器
  requestInterceptor(config) {
    // ...

    if (this._storage.getItem("token")) {
      config.headers["Authorization"] =
        "Bearer " + this._storage.getItem("token");
    }

    // ...

    return config;
  }

  // 覆写响应拦截器
  responseInterceptor(response) {
    const res = response.data;

    // ...

    if (res.code === 200) {
      return res.data;
    }
    if (res.code === 401 && this._toast) {
      this._toast.error("Token失效，请重新登录");
      this._router.push({ name: "login" });
      return;
    }

    // ...

    return Promise.reject(res.msg);
  }
}

Vue.prototype.$http = new Request();
```

# Http 接口

- get(url, params, options)

```javascript
this.$http
  .get("/login", { usename: "xxx", password: "xxxxx" })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

- post(url, params, config = null, serialize = true)

> content-type: application/x-www-form-urlencoded

```javascript
this.$http
  .post("/user", { nickname: "张三", gender: "male", age: 24 })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

- postJson(url, params, options = null)

> content-type: application/json

```javascript
this.$http
  .postJson("/user", { nickname: "张三", gender: "male", age: 24 })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

- postFile(url, params, options = null)

> content-type: multipart/form-data

```javascript
this.$http
  .postFile("/upload", { file: file, businessType: "userAvatar" })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

- put(url, params, config = null, serialize = true)

> content-type: application/x-www-form-urlencoded

```javascript
this.$http
  .put("/user/4567320", { age: 18 })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

- putJson(url, params, options = null)

> content-type: application/json

```javascript
this.$http
  .putJson("/user/4567320", { age: 18 })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

- del(url, config = null)

```javascript
this.$http
  .del("/file?id=R6AhD4Jw")
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
```

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