Vue发送异步请求以及小栗子
由于Vue是不推荐再去直接操作DOM元素的，所以Vue开发中，不建议再去使用Jquery中的ajax去发送异步请求。
推荐做法是：
- 使用vue官方推出的 vue-resource.js
- 使用axios.min.js
使用例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta> <title>Document</title> <script src="../js/vue.js"></script> <script src="../js/vue-resource.js"></script> <!-- 引入 vue-resource 后 vue实例就会挂载一个$http对象，包含 get,post和jsonp等若干请求 -->
<!--并且vue-resource 需要在vue.js之后引入 -->
</head> <style> [v-cloak] { display: none; } </style> <body> <div id="app"> <input type="button" value="get 请求" @click='getrequest'> <input type="button" value="post 请求" @click='postrequest'> </div> </body> <script> let vm = new Vue({ el: '#app', data: { vmsg: 'vue', }, methods: { getrequest() { //$http对象的get () 方法，用于发起get请求，第一个参数为请求url地址，第二个为可选参数， 通过调用.then(arg1[成功回调，必传],arg2【失败回调，可选】)方法获取返回的数据， this.$http.get('../data/data.json', {//自己模拟的数据 emulateJSON: true }).then(result => { console.log(result) }) }, async postrequest() { //$http对象的get () 方法，用于发起get请求，第一个参数为请求url地址，第二个为可选参数， 通过调用.then(arg1[成功回调，必传],arg2【失败回调，可选】)方法获取返回的数据， // this.$http.post('../data/data.json', {}, {emulateJSON:true}).then(result=>{ // emulateJSON:true 参数设置button提交的内容为普通表单数据格式 // console.log(result) // }) let {body} = await this.$http.post('../data/data.json', {}, { //使用async await 异步语法糖，就不需要使用.then()方法接收了。
//使用结构语法接收
emulateJSON: true }); console.log(body); }, } })
</script>
</html>
2.axios 发送数据请求：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <script src="../js/axios.min.js"></script> </head> <body> <div id="app"> <input type="button" value='发送axios请求' @click='laxios'> </div> </body> <script> Vue.prototype.$http = axios; //给Vue原型上添加$http属性，指向axios对象，跟vue-reource发送请求，做到结构一样！！！ let vm = new Vue({ el: '#app', data: {}, methods: { laxios() { this.$http.get('../data/data.json').then(v => { console.log(v); // 打印结果 status: 200表示请求ok
//config: {transformRequest: {…}, transformResponse: {…}, headers: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
// data: {status: 0, message: Array(3)} // headers: {accept-ranges: "bytes", connection: "Keep-Alive", content-length: "372", content-type: "application/json", date: "Wed, 05 May 2021 07:26:25 GMT", …} // request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …} // status: 200 // statusText: "OK" // __proto__: Object }); } } }) </script> </html>
