v-axios

v-axios,使你更简洁的使用axios

Usage no npm install needed!

<script type="module">
  import vAxios from 'https://cdn.skypack.dev/v-axios';
</script>

README

v-axios

简介

由 axios 搬运而成的vue插件【别名:vue-axios3
初衷就是让大家可以更语义的在 vue 引入 axios插件,以便更方便、快捷开发。
目前已经支持在其他框架(如react)以及node环境下使用部分功能。

安装 && 引入

  • 安装
npm install axios v-axios --save
  • 引入
import vAxios from 'v-axios';
// 不引入这个将自动注入axios
import axios from 'axios';
  • cdn引入
<script src="https://unpkg.com/axios"></script>
<script src="https://unpkg.com/v-axios"></script>

通用

提供了一个通用的cAxios方法,这个方法暴露出了简单封装的get, post, request等方法;还可以通过配置可以开启取消重复的请求。

引用

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'; 但不建议这种写法

示例

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

引入

// 不引入这个将自动注入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 均可调用

示例:

// 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