Axios-异步加载数据

Big Luna

已于 2024-05-13 13:31:26 修改

阅读量200

点赞数 1

文章标签： html 前端 javascript

于 2024-05-12 12:36:46 首次发布

本文链接：https://blog.csdn.net/BigLuna/article/details/138752131

版权

书写格式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    第一步-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<input type="button" value="获取数据GET" onclick="get()">
<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
function get() {
    //第二步
    //通过axios发送异步请求----get
    axios({
        method:"get",
        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
    }).then(result => {
        console.log(result.data);
    })

    /** 简化写法直接引用axios.get
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        console.log(result.data);
    }) */
}
function post() {
    //通过axios发送异步请求----post
    axios({
        method:"post",
        url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        data: "id = 1"
    }).then(result => {
        console.log(result.data);
    })

     /** 简化写法直接引用axios.post
    axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
        console.log(result.data);
    }) */
}
</script>

vue+ Axios+vue生命周期综合案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios案例</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>

        <tr align="center" v-for="(emps,index) in emps">
            <tb>{{index + 1}}</tb>
            <tb>{{emp.name}}}</tb>
            <tb>
                <span v-if="emp.gender == 1">男</span>
                <span v-if="emp.gender == 2"></span>
            </tb>
            <tb>教师</tb>
            <tb>2009-08-09</tb>
            <tb>2010-08-06</tb>
        </tr>
    </table>
</body>
<script>
    new vue({
        e1:"#app",
        data:{
            emps:[]
        },
        //钩子函数 挂载完成后自动触发mounted
        mounted(){
            //发送异步请求，加载数据
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
                this.emps = result.data.data;
            })
        }
    });
</script>
</html>