Vuejs 项目的 axios 插件。
如何使用
通过 Script 标签
<!-- 在 vue.js 之后引入 --> <script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-axios-plugin"></script>
npm
首先通过 npm 安装
npm install --save vue-axios-plugin
然后在入口文件配置如下:
import Vue from 'Vue';
import VueAxiosPlugin from 'vue-axios-plugin';
Vue.use(VueAxiosPlugin, {
// 请求拦截处理
reqHandleFunc: config => config,
reqErrorFunc: error => Promise.reject(error),
// 响应拦截处理
resHandleFunc: response => response,
resErrorFunc: error => Promise.reject(error)
});
配置参数
除了 axios 提供的默认请求配置, vue-axios-plugin 也提供了 request/response 拦截器配置,如下:
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
reqHandleFunc | {Function} | config => config | 请求发起前的拦截处理函数 |
reqErrorFunc | {Function} | error => Promise.reject(error) | 处理请求错误的函数 |
resHandleFunc | {Function} | response => response | 响应数据处理函数 |
resErrorFunc | {Function} | error => Promise.reject(error) | 响应错误处理函数 |
示例
在 Vue 组件上添加了$http
属性,它默认提供 get
和 post
方法,使用如下:
this.$http.get(url, data, options).then(response => {
console.log(response)
})
this.$http.post(url, data, options).then((response) => {
console.log(response)
})
你也可以通过 this.$axios
来使用 axios
所有的 api 方法,如下:
this.$axios.get(url, data, options).then(response => {
console.log(response);
})
this.$axios.post(url, data, options).then(response => {
console.log(response);
})
分享笔记