【Vue.JS】AXIOS

Nephilim 2023-01-20

Tips：一些记录，一些笔记

2023/1/19

THURSDAY

”没有朋友多孤独啊？“

"有了也一样"

—— 李诞（脱口秀）

AXIOS

AXIOS是前端全最火的，专注于数据请求的库；

它的官方网站是：https://axios-http.com/

它的Github官方地址是：https://github.com/axios/axios

它的JsDelivr官方地址：https://www.jsdelivr.com/package/npm/axios

Axios：基础语法

Axios的基本语法如下：

axios({
  method: "请求类型",
  url: "请求的URL地址"
}).then((result) => {
   .then 用来指定请求成功之后d额回调函数
  // 形参中额 result 是请求成功之后的结果
})

代码：

<!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>Axios</title>
</head>
<body>
    
    <script src="../venv/axios/axios.js"></script>


    <script>
        // 调用 axios 的返回值是 Promise 对象
        const result = axios({
            method: "get",
            // 请求【一言 | Hitokoto】
            url: "https://v1.hitokoto.cn/"
        })
        
        result.then((result) => {
            hitokoto_from = result.data.from
            hitokoto_hitokoto = result.data.hitokoto
            console.log("Hitokoto【" + hitokoto_hitokoto + "】来自【" + hitokoto_from + "】")
        })
</script>


</body>
</html>

运行效果：

Axios方法返回的数据中的【data】属性中包含的内容，才是接口服务返回的真实数据：

Axios在请求到数据之后，在真正的数据之外，做了一层包装：

{
  config: {},
  headers: {},
  request: {},
  status: xxx,
  statusText: "",
   接口服务器返回的【真实的数据】
  data: {},
}

Axios：传参

语法：

axios({
   请求方法
  method: "",
  // 请求的地址
  url: "",
  // GET请求，URL地址中的查询参数
  params: {},
  // POST请求，请求体中的参数
  data: {}
}).then(function (result) {
  console.log(result)
})

来看看【一言 Hitokoto】的API接口文档：https://developer.hitokoto.cn/sentence/

修改我们的代码，添加GET请求参数：

代码：

<!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>Axios</title>
</head>
<body>
    
    <script src="../venv/axios/axios.js"></script>


    <script>
        // 调用 axios 的返回值是 Promise 对象
        const result = axios({
            method: "get",
            // 请求【一言 | Hitokoto】
            url: "https://v1.hitokoto.cn/",
            params: {
                c: 'd',
                c: 'a',
                encode: 'json',
                charset: 'utf-8'
            }
        })
        
        result.then((result) => {
            hitokoto_from = result.data.from
            hitokoto_hitokoto = result.data.hitokoto
            console.log("Hitokoto【" + hitokoto_hitokoto + "】来自【" + hitokoto_from + "】")


            // console.log(result.data)
        })
</script>


</body>
</html>

执行效果：

可以看到，现在返回的数据都是来自【动画文学】。

样例（1）

添加了一个按钮，并通过DOM操作获取数据

代码：

<!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>Axios</title>
</head>
<body>
    
    <button id="post_hitokoto">请求【Hitokoto】</button>


    <script src="../venv/axios/axios.js"></script>


    <script>


        document.querySelector('#post_hitokoto').addEventListener(
            'click', function () {
                
                // 调用 axios 的返回值是 Promise 对象
                const result = axios({
                    method: "get",
                    // 请求【一言 | Hitokoto】
                    url: "https://v1.hitokoto.cn/",
                    params: {
                        c: 'd',
                        c: 'a',
                        encode: 'json',
                        charset: 'utf-8'
                    }
                })
                
                result.then((result) => {
                    hitokoto_from = result.data.from
                    hitokoto_hitokoto = result.data.hitokoto
                    console.log("Hitokoto【" + hitokoto_hitokoto + "】来自【" + hitokoto_from + "】")


                    // console.log(result.data)
                })


            }
        )
</script>


</body>
</html>

执行效果：

上述代码也可以使用【await】改进：

<!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>Axios</title>
</head>
<body>
    
    <button id="post_hitokoto">请求【Hitokoto】</button>


    <script src="../venv/axios/axios.js"></script>


    <script>
        // await 只能用在被 async 修饰的方法中
        document.querySelector('#post_hitokoto').addEventListener(
            'click', async function () {
                
                // 调用 axios 的返回值是 Promise 对象
                // 如果调用的某个方法的返回值是 Promise 实例，那么前面可以添加 await
                const result = await axios({
                    method: "get",
                    // 请求【一言 | Hitokoto】
                    url: "https://v1.hitokoto.cn/",
                    params: {
                        c: 'd',
                        c: 'a',
                        encode: 'json',
                        charset: 'utf-8'
                    }
                })
                
                console.log(result)


            }
        )
</script>


</body>
</html>

使用解构赋值：

<!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>Axios</title>
</head>
<body>
    
    <button id="post_hitokoto">请求【Hitokoto】</button>


    <script src="../venv/axios/axios.js"></script>


    <script>
        // await 只能用在被 async 修饰的方法中
        document.querySelector('#post_hitokoto').addEventListener(
            'click', async function () {
                
                // 调用 axios 的返回值是 Promise 对象
                // 如果调用的某个方法的返回值是 Promise 实例，那么前面可以添加 await
                
                // 通过解构赋值 获得 data 属性
                // 并且重命名为 res 变量，以便后续程序处理
                const { data: res } = await axios({
                    method: "get",
                    // 请求【一言 | Hitokoto】
                    url: "https://v1.hitokoto.cn/",
                    params: {
                        c: 'd',
                        c: 'a',
                        encode: 'json',
                        charset: 'utf-8'
                    }
                })
                
                console.log(res)


            }
        )
</script>


</body>
</html>

样例（2）

用Vue.JS的方式获取数据，并且在表格中展示出来：

代码：

<!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>Axios</title>


    <link rel="stylesheet" href="../venv/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/brandlist.css">
    
</head>
<body>
    
    <div id="app">
        <br>
        <button class="btn btn-primary" id="post_hitokoto" @click="post_hitokoto">请求【Hitokoto】</button>


        <hr>


        <div class="card">


            <div class="card-header">
                Hitokoto详情
            </div>


            <div class="card-body">
            <table class="table table-hover">
                <thead>
                    <td>id</td>
                    <td>uuid</td>
                    <td>type</td>
                    <td>from</td>
                    <td>from_who</td>
                    <td>hitokoto</td>
                </thead>
                <tbody>
                    <tr v-for="record in hitokoto_list">
                        <td>{{ record.id }}</td>
                        <td>{{ record.uuid }}</td>
                        <td>{{ record.type }}</td>
                        <td>{{ record.from }}</td>
                        <td>{{ record.from_who }}</td>
                        <td>{{ record.hitokoto }}</td>
                    </tr>
                </tbody>
            </table>
            </div>


        </div>
        


    </div>


    <script src="../venv/axios/axios.js"></script>
    <script src="../venv/vuejs_2/vue.js"></script>


    <script>


        const vm = new Vue({
            el: "#app",
            data: {
                id: "",
                uuid: "",
                hitokoto: "",
                type: "",
                from: "",
                from_who: "",


                hitokoto_list: [],
            },
            methods: {
                post_hitokoto() {


                    // 调用 axios 的返回值是 Promise 对象
                    const result = axios({
                        method: "get",
                        // 请求【一言 | Hitokoto】
                        url: "https://v1.hitokoto.cn/",
                        params: {
                            // c: 'd',
                            // c: 'a',
                            encode: 'json',
                            charset: 'utf-8'
                        }
                    })
                    
                    result.then((result) => {


                        hitokoto_id = result.data.id
                        hitokoto_uuid = result.data.uuid
                        hitokoto_hitokoto = result.data.hitokoto
                        hitokoto_type = result.data.type
                        hitokoto_from = result.data.from
                        hitokoto_from_who = result.data.from_who


                        current_record = {
                            id: hitokoto_id,
                            uuid: hitokoto_uuid,
                            hitokoto: hitokoto_hitokoto,
                            type: hitokoto_type,
                            from: hitokoto_from,
                            from_who: hitokoto_from_who
                        }


                        this.hitokoto_list.push(current_record)


                        console.log(this.hitokoto_list)
                        
                    })


                }
            }
        })
</script>


</body>
</html>

执行效果：

axios.get()

语法：

axios.get("url地址", {
  // GET参数
  params: {}
})

axios.post()

语法：

axios.post("url地址", {
  // POST请求体 数据
})

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

【Vue.JS】AXIOS

评论