[JavaScript知识库] axios的使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> axios的使用 -> 正文阅读

[JavaScript知识库]axios的使用

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

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

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限?

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