YouTip LogoYouTip

Vuejs Ajax Axios

Vue.js 2.0 recommends using axios for ajax requests. Axios is a Promise-based HTTP library that can be used in browsers and node.js. GithubOpen Source Address: [https://github.com/axios/axios](https://github.com/axios/axios) ### Installation **Using cdn:** or **Using npm:** $ npm install axios **Using bower:** $ bower install axios **Using yarn:** $ yarn add axios ### Browser Support !(#) * * * ## GET Method We can simply read JSON data: ## GET Example new Vue({el: '#app', data(){return{info: null}}, mounted(){axios .get('') .then(response =>(this.info = response)) .catch(function(error){console.log(error); }); }}) [Try it Β»](#) Use response.data to read JSON data: ## GET Example

Website List

{{ site.name }}
new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('') .then(response => (this.info = response.data.sites)) .catch(function (error) { // Request failed handling console.log(error); }); } }) [Try it Β»](#) GET method parameter passing format is as follows: ## Parameter Passing Description 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 new Vue({el: '#app', data(){return{info: null}}, mounted(){axios .post('') .then(response =>(this.info = response)) .catch(function(error){console.log(error); }); }}) [Try it Β»](#) POST method parameter passing format is as follows: ## Parameter Passing Description 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:' responseType:'stream'}) .then(function(response){response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))}); axios(url[, config])axios('/user/12345'); ### Request Method Aliases For ease of use, aliases are provided for all supported request methods. You can use the alias 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, properties such as url, method, and data do not need to be specified in the configuration. ### Concurrency Helper functions for handling concurrent requests: axios.all(iterable) axios.spread(callback) ### Creating an Instance You can create a new axios instance 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 configuration will be merged with the instance's configuration: 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 Options The following configuration options are available when creating a request. Note that only url is required. If method is not specified, the request will default to get method. { // `url` is the server URL to use for the request url: "/user", // `method` is the method used to create the request method: "get", // default is get // `baseURL` will be prepended to url unless url is an absolute URL. // It can be convenient to set a `baseURL` for passing relative URLs to methods of an axios instance baseURL: "https://some-domain.com/api/", // `transformRequest` allows changing the request data before it is sent to the server // This only applies to request methods "PUT", "POST", and "PATCH" // The functions in the array must return a string, ArrayBuffer, or Stream transformRequest: [function (data) { // Do some transformation to the data return data; }], // `transformResponse` allows changing the response data before it is passed to then/catch transformResponse: [function (data) { // Do some transformation to the data return data; }], // `headers` is the custom request headers to be sent headers: {"X-Requested-With": "XMLHttpRequest"}, // `params` is the URL parameters to be sent with the request // Must be a plain object or URLSearchParams object params: { ID: 12345
← Postgresql Create DatabaseMac Install Postgresql β†’