It is a XHR plugin that works in specific features for Vue.js 2.x and and above versions. It has many similar features with jQuery
's ajax()
and Angular
's $http()
.
It allows you to write more tidy code by solving many of the most common features used by developers in the core. Here are a few examples:
One of the most common problems is the problem of sending dublicate requests at the same time. Vue.js Ajax solve it easily. You can find more information here.
File uploading with Ajax
(XMLHttpRequest
) can sometimes require you to write extra code. But it's very simple to do it with Vue.js Ajax
. You can find more information here.
History feature to create a faster browsing experience. This means less elements to load and therefore faster browsing. But it's very simple to do it with Vue.js Ajax
. There is a detailed explanation to here.
This setting provides protection against CSRF attacks. You can find more information here.
There is also Component Shifter
which solves a different task. With componentShifter() you can load (with Vue.ajax
) and render your Vue template
(html) in your application by dynamic & async Vue.component()
. You can also add components and run them nested. You can find more information here.
npm install vuejs-ajax --save
// ES6
import ajax from "vuejs-ajax"
Vue.use(ajax)
// ES5
var ajax = require("vuejs-ajax")
Vue.use(ajax)
The general shorthand version is as follows:
Vue.ajax.get(string url[, object data] [,object configurations])
.then(function success[, function error])
Property | Required | Type | Description |
---|---|---|---|
url | Yes | String | A string containing the URL to which the request is sent. |
data | No | Object | A plain object that is sent to the server with the request. |
configurations | No | Object | A set of key/value pairs that configure the Vue.ajax request. |
All of the above methods are a shorthand method of the Vue.ajax()
:
Vue.ajax({
url: "https://example.com",
method: "get" // post, put, patch, delete, head, jsonp
}).then(function(response) {
console.log("Success", response.data)
}, function(response) {
console.log("Error", response.statusText)
})
You can find detailed information about the Methods
here.
Configuration | Type | Default | Available |
---|---|---|---|
assets |
String Or Object | - | - |
async |
Boolean | true | true, false |
cache |
Boolean | false | true, false |
complete |
Function | - | - |
csrf |
Boolean | true | true, false |
data |
Object | - | - |
fileInputs |
Element Object | - | Input file upload objects |
hardReloadOnError |
Boolean | false | true, false |
history |
Boolean | false | true, false |
headers |
Object | - | - |
method |
String | get | delete, get, head, jsonp, patch, post, put |
preventDuplicate |
Boolean | true | true, false |
scrollTop |
Boolean | false | true, false |
timeout |
Integer | 60000 | Time in milliseconds |
title |
String | - | - |
url |
String | - | - |
urlData |
Object | - | - |
withCredentials |
Boolean | false | true, false |
Copyright (c) 2019 Fatih Koca