Axios-入门

介绍

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

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

入门

1引入Axios的js文件

javascript 复制代码
 <script src="js/axios.js"></script>

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

javascript 复制代码
<!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

请求方式别名

改写

javascript 复制代码
<!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()向服务器发送请求返回数据赋值遍历渲染表格

数据

代码

javascript 复制代码
<!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>
相关推荐
2301_799404915 小时前
AJAX 介绍
前端·ajax·axios
gaog2zh2 天前
0803分页_加载更多-网络ajax请求2-react-仿低代码平台项目
react.js·ajax·分页·加载更多
前端熊猫3 天前
jQuery AJAX、Axios与Fetch
ajax·okhttp·jquery
北上ing3 天前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
Jet_closer_burning3 天前
axios封装
前端·javascript·vue.js·react.js·ajax
知识分享小能手4 天前
JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
开发语言·javascript·学习·ajax·前端框架·css3·html5
知识分享小能手5 天前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5
星之卡比*5 天前
前端面试题---GET跟POST的区别(Ajax)
前端·ajax·okhttp
Komorebi_99995 天前
Axios 是一个基于 Promise 的 HTTP 客户端,可用于浏览器和 Node.js 环境。以下是它的一些主要作用
javascript·ajax
MrsBaek6 天前
前端笔记-AJAX
前端·笔记·ajax