https://github.com/xiaofan9/v-axios
由 axios 搬运而成的vue插件，v-axios
https://github.com/xiaofan9/v-axios
axios v-axios vue vue-axios vue-plugin
Last synced: 3 months ago
JSON representation
由 axios 搬运而成的vue插件，v-axios
- Host: GitHub
- URL: https://github.com/xiaofan9/v-axios
- Owner: xiaofan9
- License: mit
- Created: 2020-10-22T03:26:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-09T19:12:35.000Z (about 3 years ago)
- Last Synced: 2025-01-28T19:16:22.142Z (4 months ago)
- Topics: axios, v-axios, vue, vue-axios, vue-plugin
- Language: JavaScript
- Homepage:
- Size: 269 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-axios
## 简介
由 axios 搬运而成的vue插件【别名：[vue-axios3](https://www.npmjs.com/package/vue-axios3)】
初衷就是让大家可以更语义的在 vue 引入 axios插件，以便更方便、快捷开发。
目前已经支持在其他框架（如react）以及node环境下使用部分功能。
## 安装 && 引入
> * 安装
``` bash
npm install axios v-axios --save
```
> * 引入
```javascript
import vAxios from 'v-axios';
// 不引入这个将自动注入axios
import axios from 'axios';
```
> * cdn引入
```html
```
## 通用
提供了一个通用的cAxios方法，这个方法暴露出了简单封装的get, post, request等方法；还可以通过配置可以开启取消重复的请求。
#### 引用
```javascript
import { cAxios } from 'v-axios';
import axios from 'axios';
const { get, post, request } = cAxios(config, axios);
// config，非必填，值如下
// {
// cancelRepeat: true // 取消重复的请求
// ... AxiosRequestConfig // axios的请求参数
// }
// axios，非必填，当不传值时将会使用v-axios内部引入的axios
import { axios } from 'v-axios'; // 相当于 import axios from 'axios'; 但不建议这种写法
```
#### 示例
```javascript
import { cAxios } from 'v-axios';
import axios from 'axios';
const { get, post, request } = cAxios(config, axios);
// get 示例
export const getList = get(url);
const pr = getList(params, opt) // 返回一个Promise，其中params 为 get 请求参数，opt 为 axios的请求参数
// post 示例，与get类似
export const updateList = post(url);
const pr = updateList(data, opt); // 返回一个Promise
// request 示例
export const deleteList = request(url, method); // url 请求url；method请求方法，如method: delete
const pr = deleteList(params, opt); // 返回一个Promise
// get/post/request 执行后返回的 Promise 的使用
pr.then((data) => {
console.log(data); // data为请求res.data的值，res在data.__$res
})
```
## Vue 使用
#### Vue 兼容
|Vue \ vAxios|1.x|2.x|3.x|
|-|-|-|-|
|2.x|✔|❌|✔|
|3.x|❌|✔|✔|
#### 建议
使用3.0版本，支持vue2、vue3
#### 引入
```javascript
// 不引入这个将自动注入axios
import axios from 'axios';
// 使用 Vue 2:
import Vue from 'vue';
// 第二个参数可选
Vue.use(vAxios[, axios]);
// 使用 Vue 3:
import { createApp } from 'vue';
const app = createApp(...);
// 第二个参数可选
app.use(vAxios[, axios]);
```
#### 调用
Vue.axios/app.axios 以及 this.$http 均可调用
示例：
```javascript
// Vue.axios / app.axios
Vue.axios.get('xxx').then(res => console.log(res.data));
// this.$http
this.$http.post('xxx').then(res => console.log(res.data)).catch(err => console.log(err));
```
## API
参看 - [axios api](https://github.com/mzabriskie/axios)