axios

axios经常与vue配合使用，实现ajax操作。axios的使用场景参考下图。

image-20211013195427699 alt 使用axios需要依赖axio.min.js.如果找不到资源可以参考https://blog.csdn.net/weixin_43274097/article/details/106570717。

下面示例axios的使用步骤。

(1)html文件导入依赖。

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

(2)创建json.data文件手动构建json数据(非必要，实际开发是后端传数据)

{
    "success":true,
    "message":"成功",
    "data":{
        "items":[
            {"name":"ez","age":9,"sex":"F"},
            {"name":"az","age":81,"sex":"F"},
            {"name":"wz","age":19,"sex":"M"}
        ]
    },
    "code":10000
}

(3)axios接受数据并处理。

完整的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">

    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 固定的结构
            data: { // 定义变量和初始化数据
                "userList":[]
            },
            created() { //在页面渲染前调用定义的方法
                this.getUserList()
            },
            methods: { // 定义具体方法
                getUserList(){
                    // 数据通过get()方法传递，axios.get("请求接口/文件路径")
                    axios.get("data.json")
                    .then( // 箭头表达式
                        response => {console.log(response)}
                    ) 
                    .catch( error => {}) 
                }
            }
        })
    </script>
</body>

</html>

在console中可以看到数据的具体的层级结构，而这写数据都可以在response中拿到。

image-20211013205333964 alt 代码稍微改造下(对拿到的数据进行具体的展示)。

<!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">
        <table border="1">
            <thead>
                <tr>
                    <td>name</td>
                    <td>age</td>
                    <td>sex</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in userList">
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.sex}}</td>
                </tr>      
            </tbody>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 固定的结构
            data: { // 定义变量和初始化数据
                "userList":[]
            },
            created() { //在页面渲染前调用定义的方法
                this.getUserList()
            },
            methods: { // 定义具体方法
                getUserList(){
                    // 数据通过get()方法传递，axios.get("请求接口/文件路径")
                    axios.get("data.json")
                    .then( // 箭头表达式, reponse名字也可以替换成其他，它包含我们通过axios拿到的数据
                        // response => {console.log(response)}
                        response =>{
                            this.userList=response.data.data.items
                            console.log(this.userList)}
                    ) 
                    .catch( error => {}) 
                }
            }
        })
    </script>
</body>

</html>

可以看到数据被成功拿到了(...要点一点才会出现具体的数据)。

image-20211013210432616 alt 同时，页面中也展示了我们的数据，漂漂亮亮的。

image-20211013211825759 alt