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>