Axios+Vue 示例——获取一条笑话

最新推荐文章于 2022-08-06 15:03:39 发布

Joshua_yi

最新推荐文章于 2022-08-06 15:03:39 发布

阅读量709

点赞数 1

分类专栏： web开发文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44984664/article/details/105000859

版权

web开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

axiosgithub地址d=====(￣▽￣*)b

ajax, jqueryAjax, fetch,axios对比

ajax

优点：局部更新；原生支持
缺点：可能破坏浏览器后退功能；嵌套回调难处理

jqueryAjax

在原生的ajax的基础上进行了封装；支持jsonp

fetch

优点：解决回调地狱
缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill

axios

几乎完美

示例获取一条笑话

效果：
在这里插入图片描述

代码：
引入axios

 <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!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>axios+vue</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p> {{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods: {
                getJoke:function(){
                    // this 会改变 所以就先存起来
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        // console.log(response)
                        console.log(response.data);
                        // console.log(this.joke);
                        that.joke = response.data;
                    },function (err) { 
                        console.log(err);
                    })
                }
            },
        })

    </script>
</body>

</html>

Joshua_yi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Axios+Vue 示例——获取一条笑话

axiosgithub地址d=====(￣▽￣*)bajax, jqueryAjax, fetch,axios对比ajax优点：局部更新；原生支持缺点：可能破坏浏览器后退功能；嵌套回调难处理jqueryAjax在原生的ajax的基础上进行了封装；支持jsonpfetch优点：解决回调地狱缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支...
复制链接

扫一扫