12-原生Ajax 和 Axios

 

同步与异步操作最主要的区别：

同步操作必须按照以上步骤执行，而异步操作在第四步响应客户端时，可以继续执行第二步请求服务器，即客户端可以执行其它操作

 

数据地址：console-mock.apipost.cn/mock/4250f8d4-b605-47eb-9777-07e29548dbb8/list

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生Ajax</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 style="text-align: center">学生信息表</h1>
        <table border="1" cellspacing="0" width="60%" align="center">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图片</th>
                <th>性别</th>
                <th>职业</th>
                <th>入职时间</th>
            </tr>
            <tr align="center" v-for="item in users">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <img :src="item.image" width="100px" height="100px" alt="">
                </td>
                <td>
                    <span v-if="item.gender === 1">男</span>
                    <span v-if="item.gender === 2">女</span>
                </td>
                <td>{{item.job}}</td>
                <td>{{item.entrydate}}</td>
            </tr>
        </table>
        <input type="button" value="获取数据" v-on:click="ajax()">
    </div>
    <script>
        // 阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false

        new Vue({
            el:"#app",
            data(){
                return{
                    users:[],
                }
            },
            methods:{
                ajax() {
                    // 创建XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();

                    // 设置请求方式和请求地址
                    xhr.open("GET", "https://console-mock.apipost.cn/mock/4250f8d4-b605-47eb-9777-07e29548dbb8/list", true);

                    // 发送请求
                    xhr.send();

                    // 监听请求状态
                    xhr.onreadystatechange = () =>{
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            this.users=JSON.parse(xhr.responseText).data

                            console.log("this.users:",this.users);
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

 

Axios官方网址：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <h1 style="text-align: center">学生信息表</h1>
    <table border="1" cellspacing="0" width="60%" align="center">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图片</th>
            <th>性别</th>
            <th>职业</th>
            <th>入职时间</th>
        </tr>
        <tr align="center" v-for="item in users">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
                <img :src="item.image" width="100px" height="100px" alt="">
            </td>
            <td>
                <span v-if="item.gender === 1">男</span>
                <span v-if="item.gender === 2">女</span>
            </td>
            <td>{{item.job}}</td>
            <td>{{item.entrydate}}</td>
        </tr>
    </table>
    <input type="button" value="获取数据" v-on:click="get()">
</div>
<script>
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false

    new Vue({
        el:"#app",
        data(){
            return{
                users:[],
            }
        },
        methods:{
            get(){
                // 使用axios发送请求
                axios.get("https://console-mock.apipost.cn/mock/4250f8d4-b605-47eb-9777-07e29548dbb8/list")
                    .then(response => {
                        this.users = response.data.data
                        console.log("this.users", this.users)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>

 

posted @ 2024-03-28 17:36  马铃薯1  阅读(5)  评论(0)  编辑  收藏  举报