Axios-入门

news2025/10/31 17:25:35

介绍

Axios对原生Ajax进行了封装，简化书写，快速开发

官网：Axios中文文档 | Axios中文网 (axios-http.cn)

入门

1引入Axios的js文件

 <script src="js/axios.js"></script>

2使用Axios发送请求，并获取响应结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTE-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=l.0">
    <title>Ajax</title>
    <script src="js/axios.js"></script>
</head>

<body>
    <input type="button" value="获取数据Get" onclick="get()">
    <input type="button" value="获取数据Post" onclick="post()">

</body>
<script>
    function get(){
         axios({ mehod:"get",
           url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
      }).then(result=>{
         console.log(result);
      })
    }
    function post(){
         axios({ mehod:"post",
          url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
          data:"id=1;"
        }).then(result=>{
            console.log(result);
        })
    }
   
</script>

</html>

axios({....对象信息....mehod,url(data)}).then(result)=>{}

then后面接一个result的自定义函数

post有个而外的data

请求方式别名

改写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTE-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=l.0">
    <title>Ajax</title>
    <script src="js/axios.js"></script>
</head>

<body>
    <input type="button" value="获取数据Get" onclick="get()">
    <input type="button" value="获取数据Post" onclick="post()">

</body>
<script>
    // function get(){
    //      axios({ mehod:"get",
    //        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
    //   }).then(result=>{
    //      console.log(result);
    //   })
    // }

    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(result);})



    // function post(){
    //      axios({ mehod:"post",
    //       url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
    //       data:"id=1;"
    //     }).then(result=>{
    //         console.log(result);
    //     })
    //}

    axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result=>{console.log(result);})


</script>

</html>

案例：网页加载完成，调用vue生命周期的mounted（）向服务器发送请求返回数据赋值遍历渲染表格

数据

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<script src="js/axios.js"></script>
<body>
<div id ="app">
    <table border="1"cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>
        <tr v-for="(emp,index) in emps" align="center">
            <th>{{index+1}}</th>
            <th>{{emp.name}}</th>
            <th>
                <img : src="emp.image" width="70px" height="50px">
            </th>
            <th v-if="emp.gender=1">男</th>
            <th v-else>女</th>
            <th>{{emp.jop}}</th>
            <th>{{emp.entrydate}}</th>
            <th>{{emp.updatetime}}</th>
        </tr>
    </table>
</div>
</body>
<script>
//定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            emps:[]
        },
        methods:{

        },
        mounted(){
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                this.emps=result.data.data;
                
            })
        }
    })
</script>
</html>