Vue3 Ajax(axios)
It is recommended to use axios for ajax requests in Vue3.
Axios is a Promise-based HTTP client that can be used in both the browser and node.js.
Github open source address: https://github.com/axios/axios
Installation Methods
Using CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
or
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
Using npm:
$ npm install axios
Using bower:
$ bower install axios
Using yarn:
$ yarn add axios
Usage:
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
Browser Support
GET Method
We can easily fetch JSON data:
GET Example
const app = {
data() {
return {
info: 'Ajax Test!!'
}
},
mounted () {
axios
.get('https://www.tutorialpro.org/try/ajax/json_demo.json')
.then(response => (this.info = response))
.catch(function (error) { // Request error handling
console.log(error);
});
}
}
Vue.createApp(app).mount('#app')
Using response.data to read JSON data:
GET Example
<div id="app">
<h1>Website List</h1>
<div
v-for="site in info"
>
{{ site.name }}
</div>
</div>
<script type="text/javascript">
const app = {
data() {
return {
info: 'Ajax Test!!'
}
},
mounted () {
axios
.get('https://www.tutorialpro.org/try/ajax/json_demo.json')
.then(response => (this.info = response))
.catch(function (error) { // Request error handling
console.log(error);
});
}
}
Vue.createApp(app).mount('#app')
</script>
GET method parameter passing format is as follows:
Parameter Passing Explanation
// Directly add parameters to the URL ID=12345
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Alternatively, parameters can be set via params:
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST Method
POST Example
const app = {
data() {
return {
info: null
}
},
mounted () {
axios
.post('https://www.tutorialpro.org/try/ajax/demo_axios_post.php')
.then(response => (this.info = response))
.catch(function (error) { // Request error handling
console.log(error);
});
}
}
Vue.createApp(app).mount('#app')
POST method parameter passing format is as follows:
Parameter Passing Explanation
axios.post('/user', {
firstName: 'Fred', // Parameter firstName
lastName: 'Flintstone' // Parameter lastName
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Executing Multiple Concurrent Requests
Example
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
axios API
Requests can be made by passing the relevant config to axios.
Example
axios(config)
// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// GET request for remote image
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// Send a GET request (default method)
axios('/user/12345');
Request Method Aliases
For convenience aliases have been provided for all supported request methods:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
Note: When using alias methods, url, method, and data properties don't need to be specified in config.
Concurrency
Helper functions for dealing with concurrent requests:
axios.all(iterable)
axios.spread(callback)
Creating an Instance
You can create a new instance of axios with a custom config:
axios.create([config])
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
Instance Methods
The available instance methods are listed below. The specified config will be merged with the instance config:
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
Request Config
These are the available config options for making requests. Only the url is required. If method is not specified, the request will default to GET.
{
// `url` is the server URL that will be used for the request
url: "/user",
// `method` is the request method to be used when making the request
method: "get", // default
// `baseURL` will be prepended to `url` unless `url` is absolute.
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
baseURL: "https://some-domain.com/api/",
// `transformRequest` allows changes to the request data before it is sent to the server
// This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
// The last function in the array must return a string or an instance of Buffer, ArrayBuffer, FormData, or Stream
transformRequest: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// `transformResponse` allows changes to the response data to be made before it is passed to then/catch
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// `headers` are custom headers to be sent
headers: {"X-Requested-With": "XMLHttpRequest"},
// `params` are the URL parameters to be sent with the request
// Must be a plain object or a URLSearchParams object
params: {
ID: 12345
},
// `paramsSerializer` is an optional function in charge of serializing `params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: "brackets"})
},
// `data` is the data to be sent as the request body
// Only applicable for request methods "PUT", "POST", and "PATCH"
// When no `transformRequest` is set, it must be one of the following types:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser specific: FormData, File, Blob
// - Node specific: Stream
data: {
firstName: "Fred"
},
// `timeout` specifies the number of milliseconds before the request times out (0 means no timeout)
// If the request takes longer than `timeout`, the request will be aborted
timeout: 1000,
// `withCredentials` indicates whether or not cross-site Access-Control requests should be made using credentials
withCredentials: false, // default
// `adapter` allows custom handling of requests to make testing easier
// Returns a promise and applies a valid response (see [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials
// This will set an `Authorization` header, overwriting any existing `Authorization` custom headers you have set using `headers`
auth: {
username: "janedoe",
password: "s00pers3cret"
},
// `responseType` indicates the type of data that the server will respond with
// Options are "arraybuffer", "blob", "document", "json", "text", "stream"
responseType: "json", // default
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: "XSRF-TOKEN", // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: "X-XSRF-TOKEN", // default
// `onUploadProgress` allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` allows handling of progress events for downloads
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `maxContentLength` defines the max size of the http response content in bytes allowed
maxContentLength: 2000,
// `validateStatus` defines whether to resolve or reject the promise for a given HTTP response status code. If `validateStatus` returns `true` (or is set to `null` or `undefined`), the promise will be resolved; otherwise, the promise will be rejected.
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` defines the maximum number of redirects to follow in node.js
// If set to 0, no redirects will be followed
maxRedirects: 5, // default
// `httpAgent` and `httpsAgent` define a custom agent to be used when performing http and https requests, respectively, in node.js. This allows options to be configured like this:
// `keepAlive` is not enabled by default
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// "proxy" defines the hostname and port of the proxy server
// `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials
// This will set a `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`.
proxy: {
host: "127.0.0.1",
port: 9000,
auth: {
username: "mikeymike",
password: "rapunz3l"
}
},
// `cancelToken` specifies a cancel token that can be used to cancel the request
// (see the Cancellation section for more information)
cancelToken: new CancelToken(function (cancel) {
})
}
Response Structure
The response for an axios request contains the following information:
{
// `data` is the response that was provided by the server
data: {},
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: "OK",
// `headers` the headers that the server responded with
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {}
}
When using then, you will receive the response as follows:
axios.get("/user/12345")
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
When using catch, or passing a rejection callback as the second parameter of then, the response will be available through the error object.
Config Defaults
You can specify config defaults that will be applied to every request.
Global axios defaults:
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Custom instance defaults:
// Set config defaults when creating the instance
var instance = axios.create({
baseURL: 'https://api.example.com'
});
// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
Config Order of Precedence
Config is merged according to a specific order of precedence. This order is: the defaults found in lib/defaults.js are first, then instance.defaults property, and finally config argument for the request. The latter will take precedence over the former. Here is an example:
// Create an instance using the config defaults provided by the library
// At this point the timeout config value is `0` as is the default for the library
var instance = axios.create();
// Override timeout default for the library
// Now all requests using this instance will wait 2.5 seconds before timing out
instance.defaults.timeout = 2500;
// Override timeout for this request as it's known to take a long time
instance.get('/longRequest', {
timeout: 5000
});
Interceptors
You can intercept requests or responses before they are handled by then or catch.
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
If you need to remove an interceptor later, you can:
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
You can also add interceptors to a custom axios instance:
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
Error Handling:
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
You can define a custom HTTP status code error range using the validateStatus config option.
axios.get('/user/12345', {
validateStatus: function (status) {
return status >= 200 && status < 300; // default
}
});
return status < 500; // The request will only be rejected if the status code is greater than or equal to 500
}
})
Cancellation
Cancel requests using cancel tokens.
Axios' cancel token API is based on the cancelable promises proposal.
You can create a cancel token using the CancelToken.source factory method as shown below:
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// Handle error
}
});
// Cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
You can also create a cancel token by passing an executor function to the CancelToken constructor:
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// The executor function receives a cancel function as a parameter
cancel = c;
})
});
// Cancel the request
cancel();
Note: You can use the same cancel token to cancel multiple requests.
Using application/x-www-form-urlencoded format
By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format, you can use the following options.
Browser
In a browser environment, you can use the URLSearchParams API:
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
Not all browsers support URLSearchParams.
Alternatively, you can use the qs library to encode the data:
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
// Or in another way (ES6),
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);
Node.js Environment
In node.js, you can use the querystring module:
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
Similarly, you can use the qs library as in the browser.
Promises
Axios relies on the native ES6 Promise implementation that is supported.
If your environment doesn't support ES6 Promises, you can use a polyfill.
TypeScript Support
Axios includes TypeScript definitions.
import axios from "axios";
axios.get("/user?ID=12345");