axios的简单实用

最新推荐文章于 2024-10-02 05:39:15 发布

Comus_j

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量118

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42044885/article/details/126238231

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建html页面

引入js文件，包含两个js文件，vue和axios

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

在这里插入图片描述

编写axios

编写json文件，数据创建

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy","age":20},
            {"name":"jack","age":30},
            {"name":"lily","age":40}
        ]
    }
}

使用axios发送ajax请求，请求文件，得到数据，在页面显示

<!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>
  
</head>
<body>

    <div id="app">
        <!-- 显示 -->
        <div v-for="user in userList">
            {{user.name}}--{{user.age}}
        </div>
       
        </div> 
        <script src="vue.min.js"></script>
        <script src="axios.min.js"></script>
        <!-- <script src="data.json"></script> -->
        
    <script>
        new Vue({
            el:'#app',
            data:{
               userList:[]//数组
                },
            created(){//页面渲染之前，调用定义的方法
                this.getUserList()
            },
             methods:{//定义具体方法
                //创建方法，查询所有用户的数据
                getUserList(){
                    //使用axios，发送ajax请求
                    //axios.提交方式("请求的接口路径名称").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                    .then(response =>{
                        // console.log(response)
                       this.userList=response.data.data.items
                       console.log(this.userList)
                    })//请求成功执行
                    .catch(error =>{

                    })//请求失败执行
                }
                }
            })
        </script>
</body>
</html>