Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vxhly/vaxios-plugin
二次封装 axios,使 vue.js 中使用 axios 变得更加简单
https://github.com/vxhly/vaxios-plugin
axios axios-vue plugin vaxios vue-axios vuejs
Last synced: about 6 hours ago
JSON representation
二次封装 axios,使 vue.js 中使用 axios 变得更加简单
- Host: GitHub
- URL: https://github.com/vxhly/vaxios-plugin
- Owner: vxhly
- License: mit
- Created: 2018-10-28T06:59:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T16:13:43.000Z (almost 2 years ago)
- Last Synced: 2024-11-09T02:18:22.844Z (8 days ago)
- Topics: axios, axios-vue, plugin, vaxios, vue-axios, vuejs
- Language: JavaScript
- Homepage:
- Size: 849 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vaxios-plugin
[](https://www.npmjs.com/package/vaxios-plugin) [](https://github.com/vxhly/vaxios-plugin/network) [](https://github.com/vxhly/vaxios-plugin/stargazers) [](https://npmjs.org/package/vaxios-plugin) [](https://github.com/vxhly/vaxios-plugin/blob/master/LICENSE)
> 二次封装 axios,使 vue.js 中使用 axios 变得更加简单
# 特点
- 遵循 RESTful
- 支持 await
- 支持 async
- 简单易用
# Install
```bash
npm i -S vaxios-plugin
```
# param
## $GET
GET 原则上是不可以发一个带有 Body 的请求包,但是 HTTP 规范上并没有规定 GET 不可以发一个带有 Body 的请求包,在 axios 中虽然也支持发一个带有 Body 的请求包,本插件也集成了,但是如果后端不支持的话,慎用
> /**
> * [$GET 全局的 GET 方法]
> *
> * @method $GET
> * @param {String} url RESTful URL
> * @param {Object} payload GET 的 body 参数
> */
## $POST
> /**
> * [$POST 全局的 POST 方法]
> *
> * @method $POST
> * @param {String} url RESTful URL
> * @param {Object | Array} payload POST 的 body 参数
> */
## $PUT
> /**
> * [$PUT 全局的 PUT 方法]
> *
> * @method $PUT
> * @param {String} url RESTful URL
> * @param {Object | Array} payload PUT 的 body 参数
> */
## $PATCH
> /**
> * [$PATCH 全局的 PATCH 方法]
> *
> * @method $PATCH
> * @param {String} url RESTful URL
> * @param {Object | Array} payload PATCH 的 body 参数
> */
## $DELETE
> /**
> * [$DELETE 全局的 DELETE 方法]
> *
> * @method $DELETE
> * @param {String} url RESTful URL
> * @param {Object} payload DELETE 的 body 参数
> */
# Used
`main.js`
```bash
import Vue from 'vue'
import Vaxios from 'vaxios-plugin'
Vue.use(Vaxios, {
useparam: true,
param: {
baseURL: 'https://cnodejs.org/api/v1',
timeout: 0
}
})
```
## options
option | type | default | description
---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------
method | function | null | 自定义 axios 拦截方法,如果有自定义的方法,推荐设置自定义的拦截方法
throwError | object | { get_debug: false,post_debug: false,put_debug: false,patch_debug: false,delete_debug: false } | 当然可以直接使用 Boolean 值进行全部开启和全部关闭,该作用是在控制台中输出请求到的数据
useparam | boolean | false | 如果不想自定义 axios 拦截方法,该参数必须为 true
param | object | { baseURL: '',timeout: 0 } | 自定义 axios 拦截参数 |
## 在 vue 中使用
```html
export default {
methods: {
get () {
const url = `/users?id=123` // 必填
this.$Get(url).then((data) => {
console.log(data)
})
},
post () {
const url = `/users` // 必填
const payload = {
id: 123,
username: 'admin',
pwd: 'admin'
} // payload 必须为 Object 或者 Array,必填
this.$POST(url,payload).then((data) => {
console.log(data)
})
}
},
put () {
const url = `/users`
const payload = {
id: 123,
username: 'admin',
pwd: 'admin'
} // payload 必须为 Object 或者 Array,必填
this.$PUT(url,payload).then((data) => {
console.log(data)
})
},
patch () {
const url = `/users/pwd`
const payload = {
pwd: 'admin',
pwd2: 'admin'
} // payload 必须为 Object 或者 Array,必填
this.$PATCH(url,payload).then((data) => {
console.log(data)
})
},
deleteById () {
const url = `/users/1`
this.$DELETE(url).then((data) => {
console.log(data)
})
},
deleteByPayload (){
const url = `/users`
const payload = {
id: [1,2,3,4]
} // payload 必须为 Object 或者 Array,非必填
this.$DELETE(url,payload).then((data) => {
console.log(data)
})
}
}
```
## axios 拦截的一个实例
```javascript
import axios from 'axios'
import store from '@/store'
import config from '@/config'
import router from '@/router'
import {
Message
} from 'element-ui'
const protocol = window.location.protocol
const host = window.location.host
const domain = document.domain
let serverURL = ''
if (domain === '127.0.0.1' || domain === 'localhost') {
serverURL = config.serverURL
} else {
serverURL = `${protocol}` + '//' + `${host}:8888/api`
}
// 创建 axios 实例
const instance = axios.create({
baseURL: serverURL,
timeout: 0
})
// http request 拦截器
instance.interceptors.request.use(
config => {
// 在 headers 头上添加参数
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
if (store.state.auth.authToken) {
config.headers['Authorization'] = `${store.state.auth.authToken}`
}
return config
},
error => {
return Promise.reject(error)
}
)
// http response 拦截器
instance.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
const err = error.response.data
switch (err.status) {
case 401:
Message({
type: 'waring',
message: err.message
})
setTimeout(() => {
store.dispatch('logout')
router.replace({
name: 'Login'
})
}, 500)
break
case 404:
Message({
type: 'waring',
message: err.message
})
setTimeout(() => {
router.replace({
name: 'NotFound'
})
}, 500)
break
case 422:
Message({
type: 'waring',
message: err.message
})
break
case 500:
Message({
type: 'error',
message: err.message
})
break
default:
Message({
type: 'error',
message: err.message
})
break
}
}
return Promise.reject(error)
}
)
export default instance
```