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