Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how vuejs requests background interface". In daily operation, I believe many people have doubts about how vuejs requests background interface. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how vuejs requests background interface". Next, please follow the editor to study!

Vuejs request background interface method: 1, install axios and introduce; 2, use get or post request; 3, install vue-resource and introduce; 4, use vue-resource to send cross-domain request.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs request the background interface?

Vue request backend API method:

Ue does not support sending AJAX requests directly, and needs to be implemented using plug-ins such as vue-resource, axios and so on.

one。 Use axios to send an AJAX request:

1. Install axios and introduce:

1) npm install axios-S (download the axios component directly, and then store the axios.js in node_modules\ axios\ dist), first introduce axios into main.js: add import axios from 'axios', to this file if the axios command cannot be used in other components. You can rewrite axios as the prototype property of Vue: Vue.prototype.$http=axios, and after adding these two lines of code to main.js, you can use the this.$http command directly in the methods of the component.

2) download the axios.min.js file directly on the Internet, and import the file through script src.

two。 Send request:

1) get request uses the format:

A:axios ([options]) (this format writes all the data directly in options, options is actually a dictionary)

B:axios.get (url [, options])

New Vue ({el:'#itany', data: {user: {name:'alice', age:19},} Methods: {send () {axios ({/ / format a method:'get') Url:' http://www.baidu.com?name=tom&age=23'}) .then (function (resp) {console.log (resp.data) Catch (resp = > {console.log ('request failed:' + resp.status+','+resp.statusText);}) }, sendGet () {/ / format b axios.get ('server.php', {params: {name:'alice') Age:19}}) .then (resp = > {console.log (resp.data)) Catch (err = > {/ / console.log ('request failed:' + err.status+','+err.statusText);});},}})

2) post request format:

A:axios.post (url,data, [options])

New Vue ({el:'#itany', data: {user: {name:'alice', age:19},} Methods: {sendPost () {/ / axios.post ('server.php', {/ / name:'alice' / / age:19 / /}) / / the data sent in this way is a Request Payload data format The general data format is Form Data format. All unsent data / / axios.post ('server.php','name=alice&age=20&') / / mode 1 sends data axios.post by string (' server.php',this.user, {/ / mode 2 sends data by transformRequest method) The essence is to splice the data into a string transformRequest: [function (data) {let params='' For (let index in data) {params+=index+'='+data [index] +'&';} return params }]}) .then (resp = > {console.log (resp.data) Catch (err = > {console.log ('request failed:' + err.status+','+err.statusText);});},}})

3) send cross-domain request:

A: note: axios itself does not support sending cross-domain requests, does not provide a corresponding API, and the author has no plans to add support for sending cross-domain requests in axios, so he can only use a third-party library.

B: send cross-domain requests using vue-resource

C: install vue-resource and introduce

Npm info vue-resource # View vue-resource version information cnpm install vue-resource-S # is equivalent to cnpm install vue-resource-save

D: basic usage (using this.$http to send requests)

This.$http.get (url, [options]) this.$http.head (url, [options]) this.$http.delete (url, [options]) this.$http.jsonp (url, [options]) this.$http.post (url, [body], [options]) this.$http.put (url, [body], [options]) this.$http.patch (url, [body], [options])

2. Vue-resource sends a request:

1. Vue-resource is introduced into the installation:

1) npm install axios-S (download axios components directly. After downloading, axios.js is stored in node_modules\ axios\ dist), which is introduced by rerouting index.js: you can add import VueResource from 'vue-resource' and Vue.use (VueResource) to index.js.

2) download the axios.min.js file directly on the Internet, and import the file through script src.

2.post request method:

1) this.$http ({method:'POST', url:'/a/b', / / interface path data: {'aqlange data 123124'}, / / Parameter headers: {"X-Requested-With": "XMLHttpRequest"} }) .then ((res) = > {if (res.body.code = = "0") {this.data= res.body.result } else {this.warnMessage = "failed to get class"; this.colorMessage = "red"}) .catch (err = > {this.warnMessage = "provider failed" This.colorMessage = "red"}) 2) this.$http.post ('.. / a _ header _, {}, {header: {} EmulateJSON: true}) .then ((res) = > {if (res.body.code = = "0") {this.data= res.body.result } else {this.warnMessage = "failed to get class"; this.colorMessage = "red"}) .catch (err = > {this.warnMessage = "provider failed" This.colorMessage = "red"})

The 2.get request method is the same as post. Simply change the above post to get.

At this point, the study on "how to request the background interface by vuejs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.