https://github.com/yugasun/vue-axios-plugin
axios plugin for Vuejs project
https://github.com/yugasun/vue-axios-plugin
axios vuejs vuejs-plugin
Last synced: about 2 months ago
JSON representation
axios plugin for Vuejs project
- Host: GitHub
- URL: https://github.com/yugasun/vue-axios-plugin
- Owner: yugasun
- License: mit
- Created: 2017-08-17T03:40:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-15T10:09:50.000Z (almost 7 years ago)
- Last Synced: 2025-10-06T16:53:55.029Z (2 months ago)
- Topics: axios, vuejs, vuejs-plugin
- Language: JavaScript
- Size: 143 KB
- Stars: 58
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-axios-plugin - axios plugin for Vuejs project ` 📝 2 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - Vue - 爱可信 - 插件 - 一个结合了axios和Vuejs的插件,使http请求更容易. (公用事业 / HTTP请求)
- awesome-vue - vue-axios-plugin - A plugin that combines axios with Vuejs, making http request more easier. (Components & Libraries / Utilities)
- awesome-vue - vue-axios-plugin ★37 - A plugin that combines axios with Vuejs, making http request more easier. (Utilities / HTTP Requests)
- awesome-vue - vue-axios-plugin - A plugin that combines axios with Vuejs, making http request more easier. (Utilities / HTTP Requests)
README
## vue-axios-plugin
[](https://travis-ci.org/yugasun/vue-axios-plugin)
[](http://standardjs.com)
[简体中文](./README.zh-CN.md) | English
axios plugin for Vuejs project
## How to install
### Script tag
```html
```
### CommonJS
Firstly, npm install
```bash
npm install --save vue-axios-plugin
```
Then configure in your entry file:
```javascript
import Vue from 'Vue'
import VueAxiosPlugin from 'vue-axios-plugin'
Vue.use(VueAxiosPlugin, {
// request interceptor handler
reqHandleFunc: config => config,
reqErrorFunc: error => Promise.reject(error),
// response interceptor handler
resHandleFunc: response => response,
resErrorFunc: error => Promise.reject(error)
})
```
## Options
Except axios default [request options](https://github.com/axios/axios#request-config), `vue-axios-plugin` provide below request/response interceptors options:
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**[`reqHandleFunc`](#)**|`{Function}`|`config => config`|The handler function for request, before request is sent|
|**[`reqErrorFunc`](#)**|`{Function}`|`error => Promise.reject(error)`|The error function for request error|
|**[`resHandleFunc`](#)**|`{Function}`|`response => response`|The handler function for response data|
|**[`resErrorFunc`](#)**|`{Function}`|`error => Promise.reject(error)`| The error function for response error |
## Example
Default method in `$http`, it just contains get and post method:
```javascript
this.$http.get(url, data, options).then((response) => {
console.log(response)
})
this.$http.post(url, data, options).then((response) => {
console.log(response)
})
```
Use axios original method in `$axios`, by this, you can use all allowed http methods: get,post,delete,put...
```javascript
this.$axios.get(url, data, options).then((response) => {
console.log(response)
})
this.$axios.post(url, data, options).then((response) => {
console.log(response)
})
```
## TODO
- [ ] Unit test.
## Notice!!!
When you send a request use `application/x-www-form-urlencoded` format, you need to use [qs](https://github.com/ljharb/qs) library to transform post data, like below:
```js
import qs from 'qs'
this.$http.post(url, qs.stringify(data), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
}).then((response) => {
console.log(response)
})
```
But if the `data` has properties who's type if `object/array`, you need convert these properties into JSON string:
```js
import qs from 'qs'
function jsonProp (obj) {
// type check
if (!obj || (typeof obj !== 'object')) {
return obj
}
Object.keys(obj).forEach((key) => {
if ((typeof obj[key]) === 'object') {
obj[key] = JSON.stringify(obj[key])
}
})
return obj
}
this.$http.post(url, qs.stringify(data), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
transformRequest: [
function (data) {
// if data has object type properties, need JSON.stringify them.
return qs.stringify(jsonProp(data))
}
]
}).then((response) => {
console.log(response)
})
```
More usage, view [axios](https://github.com/mzabriskie/axios)
## License
MIT