For Vue, it is recommended to use axios to handle Ajax requests. Axios is a Promise-based HTTP library that can be used in both browsers and node.js. Github open-source address: [https://github.com/axios/axios](https://github.com/axios/axios) ### Installation Methods **Using CDN:** or **Using npm:** $ npm install axios **Using bower:** $ bower install axios **Using yarn:** $ yarn add axios ### Usage Import the default exported axios object from the axios module: import axios from 'axios'; **1. Making a GET Request** Make a request for a user with a given ID: ## Example axios.get('/user?ID=12345') .then(function(response){ // Handle success console.log(response); }) .catch(function(error){ // Handle error console.log(error); }) .finally(function(){ // Always executed }); **The above request can also be implemented as follows:** ## Example axios.get('/user',{ params:{ ID:12345 } }) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); }) .finally(function(){ // Always executed }); If you want to use async/await, add the async keyword to the outer function/method. ## Example async function getUser(){ try{ const response = await axios.get('/user?ID=12345'); console.log(response); }catch(error){ console.error(error); } } **Note:** async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers, so use it with caution. **2. Making a POST Request** ## Example axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); }); Execute multiple requests concurrently: ## Example function getUserAccount(){ return axios.get('/user/12345'); } function getUserPermissions(){ return axios.get('/user/12345/permissions'); } Promise.all([getUserAccount(), getUserPermissions()]) .then(function(results){ const acct = results; const perm = results; }); ### Browser Support !(#) * * * ## GET Method We can simply read JSON data: ## GET Example const app = {data(){return{info: 'Ajax Test!!'}}, mounted(){axios .get('') .then(response =>(this.info = response)) .catch(function(error){console.log(error); }); }}Vue.createApp(app).mount('#app') [Try it »](#) Use response.data to read JSON data: ## GET Example const app = { data() { return { info: 'Ajax Test!!' } }, mounted () { axios .get('') .then(response => (this.info = response.data.sites)) .catch(function (error) { // Handle request failure console.log(error); }); } } Vue.createApp(app).mount('#app') [Try it »](#) The format for passing parameters with the GET method is as follows: ## Parameter Passing Explanation axios.get('/user?ID=12345') .then(function(response){console.log(response); }) .catch(function(error){console.log(error); }); 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('') .then(response =>(this.info = response)) .catch(function(error){console.log(error); }); }}Vue.createApp(app).mount('#app') [Try it »](#) The format for passing parameters with the POST method is as follows: ## Parameter Passing Explanation axios.post('/user', {firstName: 'Fred', lastName: 'Flintstone'}) .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){})); * * * ## axios API Requests can be created by passing relevant configuration to axios. ## Example axios(config)axios({method: 'post', url: '/user/12345', data: {firstName: 'Fred', lastName: 'Flintstone'}}); axios({method:'get', url:'http://bit.ly/2mTM3nY', responseType:'stream'}) .then(function(response){response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))}); axios(url[, config])axios('/user/12345'); ### Request Method Aliases For convenience, the official library provides aliases for all supported request methods, which can be used directly to make requests: 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, the url, method, and data properties do not need to be specified in the config. ### Concurrency Helper functions for handling concurrent requests: axios.all(iterable) axios.spread(callback) ### Creating Instances A new axios instance can be created with custom configuration: axios.create()const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}}); ### Instance Methods The following instance methods are available. The specified config will be merged with the instance's 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 Configuration Below are the configuration options available when creating a request. Note that only url is required. If method is not specified, the request will default to using the get method. { // `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 an absolute URL. // It can be useful to set `baseURL` for an instance of axios to pass relative URLs to methods of an instance. baseURL: "https://some-domain.com/api/", // `transformRequest` allows changes to the request data before sending it to the server // This only works for request methods 'PUT', 'POST', 'PATCH' and 'DELETE' // The last function in the array must return a string or an ArrayBuffer, 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 a function responsible for 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, must be of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream data: { firstName: "Fred" }, // `timeout` specifies the number of milliseconds before the request times out // 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 which makes testing easier // Return a promise and apply a valid response (see (#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 set in `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 in node.js 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 like the following to be configured: // `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 set in `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 Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { })} ### Response Schema The response for an axios request will contain 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 a response like this: 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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 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 will be merged with the order of precedence. The order is found in the library defaults found in lib/defaults.js, then the instance's defaults property, and finally the config parameter 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 it's the default value var instance = axios.create();// Override the timeout default value for the library // Now all requests will wait 2.5 seconds before timing out instance.defaults.timeout = 2500;// Override timeout for this known request that will take long instance.get('/longRequest', { timeout: 5000}); ### Interceptors Interceptors are used to 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) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data return response; }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error); }); If you want to remove an interceptor later you can do so: var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor); Interceptors can be added 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 < 500; // Resolve only if the status code is less than 500 }}) ### Cancellation Cancel requests using a cancel token. Axios's cancel token API is based on the (https://github.com/tc39/proposal-cancelable-promises) You can create a cancel token using the CancelToken.source factory method like this: 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) { // An executor function receives a cancel function as a parameter cancel = c; })});// Cancel the request cancel(); **Note**: the same cancel token can be used 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 instead, you can use the following options. **Browser** In a browser, you can use the URLSearchParams API: const params = new URLSearchParams();params.append('param1', 'value1');params.append('param2', 'value2');axios.post('/foo', params);