axios的简单使用

shaoshaossm

发布于 2022-12-27 14:54:03

1.1K0

文章被收录于专栏：Java啊Java啊

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

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

引入js文件

输入vuehtml快捷键生成vue快捷模板

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

创建数据

这里只做演示，所以json数据就自己造一个了data.json文件

{
  "success": "ok",
  "coed": 200,
  "data": {
    "items": [
      {
        "name": "ssm",
        "age": 10
      },
      {
        "name": "ssm2",
        "age": 20
      },
      {
        "name": "ssm3",
        "age": 30
      }
    ]
  }
}

编写代码

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

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <meta name="\viewport\" content="\width=device-width" initial-scale="1.0\">
    <title>Document</title>
</head>

<body>
<div id="app">
    <table border="2">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr v-for="item in memberList ">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            memberList: [] // 数组
        },
        created() { //页面渲染之前
            // 调用方法
            this.getList()
        },
        methods: {
            getList() {
                // axios.get('http://...')
                axios.get('data.json')
                    .then(response => { //请求成功
                        console.log(response)
                        this.memberList = response.data.data.items // 具体数据
                    })
                    .catch(error => { // 请求失败
                        console.log(error)
                    })
            }

        }

    })
</script>
</body>

</html>