本站由axios爱好者共建,部署在vultr vps上,推荐使用vultr!价格实惠,实力雄厚。 最近新注册用户充值$25,可额外获赠$50,搭建博客必备。 前往注册

udemy web开发课程,涵盖angular、vue和react,共17门,几十G课程网盘观看 前往领取

vue-axios-plugin

Build Status
Downloads
Version
js-standard-style

简体中文 | English

axios plugin for Vuejs project

How to install

Script tag

<!-- add it after vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-axios-plugin"></script>

CommonJS

Firstly, npm install

npm install --save vue-axios-plugin

Then configure in your entry file:

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, 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:

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…

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 library to transform post data, like below:

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:

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

License

MIT