yugasun / Vue Axios Plugin
Licence: mit
axios plugin for Vuejs project
Stars: ✭ 55
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Axios Plugin
Quasar Cloud Demo
Demo Project using Quasar & VueJs. Shows Vuex,Vuelidate,Axios etc...
Stars: ✭ 44 (-20%)
Mutual labels: axios
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-10.91%)
Mutual labels: axios
Axios Module
Secure and easy axios integration with Nuxt.js
Stars: ✭ 998 (+1714.55%)
Mutual labels: axios
Vue Cli3.0 Vueadmin
基于vue-cli3.0+vue+elementUI+vuex+axios+权限管理的后台管理系统
Stars: ✭ 1,002 (+1721.82%)
Mutual labels: axios
Vue Spa
vue-spa : vue + vue-router + axios + vuex + vux 快速成型移动端项目,直接使用。欢迎star
Stars: ✭ 46 (-16.36%)
Mutual labels: axios
Community User Profile
👨💻 Profile page, but for developers.
Stars: ✭ 32 (-41.82%)
Mutual labels: axios
Nodeactyl
A NodeJS API for Pterodactyl panel, this was originally designed for discord.js (Discord bots)
Stars: ✭ 55 (+0%)
Mutual labels: axios
Axios Rest
A simple axios wrapper to make rest api call delightful
Stars: ✭ 41 (-25.45%)
Mutual labels: axios
Frisbee
🐕 Modern fetch-based alternative to axios/superagent/request. Great for React Native.
Stars: ✭ 1,038 (+1787.27%)
Mutual labels: axios
Moveit
🚀 NLW #4 | React+ TypeScript + NextJS + StyledComponents + Firebase + MongoDb +Axios
Stars: ✭ 39 (-29.09%)
Mutual labels: axios
Wp Vue Starter
WordPress starter theme using REST as backend and Vue + Vue Router for front end framework
Stars: ✭ 46 (-16.36%)
Mutual labels: axios
Use Axios Request
Data fetching is easy with React Hooks for axios!
Stars: ✭ 38 (-30.91%)
Mutual labels: axios
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-41.82%)
Mutual labels: axios
React Antd Admin Template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+1758.18%)
Mutual labels: axios
Vue3 Admin
👏vue3.0后台管理框架👏基于vue-cli4+compositionAPI+vue-router4
Stars: ✭ 54 (-1.82%)
Mutual labels: axios
Laravel Vue
This application is test and implemented by Laravel 5.4 and Vue.js 2.
Stars: ✭ 46 (-16.36%)
Mutual labels: axios
vue-axios-plugin
简体中文 | 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].