axios完成请求的发送

最新推荐文章于 2023-08-29 16:04:02 发布

zhongbai-

最新推荐文章于 2023-08-29 16:04:02 发布

阅读量194

点赞数 1

分类专栏： vue 文章标签： ajax

本文链接：https://blog.csdn.net/sjgllllll/article/details/117570586

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

例子：
json数据：

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

html代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--把userList数组里面数据显示 使用v-for指令 -->
        <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>
        new Vue({
            el: '#app',
            //固定的结构
            data: { //在data定义变量和初始值
                //定义变量，值空数组
                userList:[]
            },
            created() { //页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods:{//编写具体的方法
                //创建方法 查询所有用户数据
                getUserList() {
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        .then(response =>{//请求成功执行then方法
                            //response就是请求之后返回数据
                            //console.log(response)
                            //通过response获取具体数据，赋值给定义空数组
                            this.userList = response.data.data.items
                            console.log(this.userList)
                        }) 
                        .catch(error =>{
                        }) //请求失败执行catch方法
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

zhongbai-

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
axios完成请求的发送

axiosaxios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端在浏览器中可以帮助我们完成 ajax请求的发送在node.js中可以向远程接口发送请求例子：json数据：{ "sucess":true, "code":20000, "message":"成功", "data":{ "items":[ {"name":"lucy","age":20}, {"na
复制链接

扫一扫