# @vue-async/fetch

> Fetch.

Latest version **0.1.1** (published 2023-07-31) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @vue-async/fetch
pnpm add @vue-async/fetch
yarn add @vue-async/fetch
bun add @vue-async/fetch
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-07-31 |
| First published | 2022-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 751.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hubert |
| Maintainers | acehubert |
| Keywords | vue, vue-async, fetch, microfront |

## Links

- npm: https://www.npmjs.com/package/@vue-async/fetch
- Repository: https://github.com/aceHubert/vue-async
- Homepage: https://github.com/aceHubert/vue-async#readme
- Issues: https://github.com/aceHubert/vus-async/issues
- npm.io page: https://npm.io/package/@vue-async/fetch

## Dependencies (1)

- [vue-demi](https://npm.io/package/vue-demi.md) ^*

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-07-31
- 0.1.0 — 2023-07-27
- 0.1.0-alpha.10 — 2023-04-13
- 0.1.0-alpha.9 — 2022-09-28
- 0.1.0-alpha.8 — 2022-09-28
- 0.1.0-alpha.7 — 2022-09-27
- 0.1.0-alpha.6 — 2022-09-20
- 0.1.0-alpha.5 — 2022-09-07
- 0.1.0-alpha.4 — 2022-09-02
- 0.1.0-alpha.2 — 2022-08-18
- 0.1.0-alpha.1 — 2022-08-10
- 0.1.0-alpha.0 — 2022-08-09

## README

## @vue-async/fetch

> 在 `Vue 3.x` or `Vue 2.16.x + @vue/composition-api` 中使用，  
> 同时支持在Vue实例外调用，以及手动控制当前激活的fetch对象

## 安装

```bash
yarn add @vue-async/fetch
或者
npm i -S @vue-async/fetch
```

<br>

## 使用

### 直接使用
```javascript
// 使用 axios 作为示例
import axios from 'axios';
import { regisApi } from '@vue-async/fetch';

const axiosInstance = axios.create({
  timeout: 5000
})

const prefix = 'http://api/base_url'
const userApi = registApi(axiosInstance, {
  getUsers: typedUrl<User[]>`get /users`,
  // get 可以省略
  // 通过取对象字符串
  getUser: typedUrl<User, { id: string | number }>`/user/${'id'}`,
  // 或者通过函数拼接url
  getUser: typedUrl<User, { id: string | number }>`/user/${(params)=> params.id}`,
  addUser: typedUrl<User, any, Partial<Omit<User, 'id'>>>`post /user`,
}, prefix);

userApi.getUsers().then(({data})=>{ console.log(data)});
// params 参数
userApi.getUsers({ params:{id:1} }).then(({data})=>{ console.log(data)});
// body 参数
userApi.addUser({ data:{ id:1,name:'张三' }}).then(({data})=>{ console.log(data)});

```

```javascript
// Vue2
import Vue from 'vue'
import { createFetch, defineRegistApi, setActiveFetch, FetchVuePlugin } from '@vue-async/fetch';

Vue.use(FetchVuePlugin);

const afetch = createFetch(axiosInstance)

// 注册 registApi 插件
afetch.use(plugin)

// 定义 regsitApi
const useUserApi = defineRegistApi('user',{
  apis:{
    getUsers: typedUrl<User[]>`get /users`
  }
})

new Vue({
  ...
  afetch,
}).$mount('#app')

// 组件内使用
{
  created(){
    this.$afetch.client // => axiosInstance from createFetch

    //激活当前使用的fetch对象
    setActiveFetch(afetch)
    // 使用user api
    const userApi = useUserApi();
    // 或使用其它的fetch对象注册regist api
    const userApi = useUserApi(afetch);
    userApi.getUsers()
  }
}
// 或者
{
  inject:{
    'afetch':{from: fetchSymbol}
  },
  created(){
    this.afetch
  }
}


// 在 @vue/composition-api 中使用 registApi
import { defineComponent } from '@vue/composition-api'

defineComponent({
  setup(){
    const userApi = useUserApi();
    userApi.getUsers()
  }
})
```

```javascript
// Vue3
import { createApp, defineComponent } from 'vue'
import { createFetch, defineRegistApi } from '@vue-async/fetch';

const afetch = createFetch(axiosInstance)

const app = createApp({
  ...
})
// install fetch
app.use(afetch)

// 注册 registApi 插件
afetch.use(plugin)

// 定义 regsitApi
const useUserApi = defineRegistApi('user',{
  apis:{
    getUsers: typedUrl<User[]>`get /users`
  },
  prefix: '/'
})

// 组件内使用
defineComponent({
  setup(){
    const userApi = useUserApi();
    userApi.getUsers()
  }
})
```

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