Vue · 2022年7月6日 0

axios应用

axios是一个网络请求库,Axios,是一个基于promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

script包地址:

<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>

script包的Github链接地址:https://github.com/axios/axios

axios回调函数中的this无法改变,无法访问data中的数据,但把this保存起来,回调函数中可直接使用。

效果展示

<!DOCTYPE html>
<html lang="zh">
<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>
        <!-- 导入axios包和vue包 -->
        <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        
        <div id="app">
            <input type="button" value="每日一笑,点击获取" @click="getJoke">
            <p>
                {{joke}}
            </p>
        </div>

        <script>
            var app=new Vue({
                el:"#app",
                data:{
                    joke:" "
                },
                methods:{
                   getJoke:function(){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        console.log(response.data);
                        that.joke=response.data;
                    },
                        function(err){})
                   } 
                },
            })
        </script>
</body>
</html>