vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue axios获取接口数据

通过Vue+axios获取接口数据的示例详解

作者:黛琳ghz

这篇文章主要介绍了Vue结合axios获取笑话接口数据的示例,重点讲解axios的特性、使用方法及请求方式,演示如何通过get方法获取数据并展示,同时解决this指向问题,感兴趣的小伙伴跟着小编一起来看看吧

前言

关于这个Vue + axios 获取接口数据的小demo,实现效果很简单,就是在Vue语法中,通过axios来获取接口的数据,然后打印出来,这里我们使用的是一个笑话的接口,其中重点关注的是如何使用axios、通过axios获取接口数据,因此这里就不介绍Vue的代码了,接下来先了解学习一下axios概要和使用方法(学过的可以直接看案例)。

关于axios概要

什么是axios

axios特性

  1. 支持 Promise API
  2. 拦截请求和响应(可以在请求前及响应前做某些操作,例如,在请求前想要在这个请求头中加一些信息,如授权信息等)。
  3. 转换请求数据和响应数据(例如,在请求时一些敏感信息需要加密,在返回数据时需要解密)
  4. 取消请求(在解决高并发时,取消一些不必要的冗余重复请求)
  5. 自动转换JSON数据(HTTP 请求时,传输的数据都是字符串,如果服务器端返回的数据不是字符串类型,就需要使用JSON.parse()对它进行转换。然后向后台发起数据请求,会自动地进行转换,不需要进行手动操作)。
  6. 客户端支持防御XSS攻击(XSS是客户端经常出现的一种攻击方式,它发生在目标用户的浏览器层面上,当渲染DOM树的过程中发生了不在预期范围内的JavaScript代码执行时,就可以被判定为发生了XSS攻击)。

axios浏览器支持情况

axios安装与使用

Github开源地址: https://github.com/axios/axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
$ npm install axios
$ cnpm install axios
$ yarn add axios

axios请求方法

  1. get:获取数据
  2. post:提交数据(表单提交 + 文件上传,一般用于提交数据,如上传图片或上传 Excel 文件等)。
  3. put:更新数据(所有数据推送到后端)。
  4. patch:更新数据(只将修改的数据推送到后端)
  5. delete:删除数据
  6. 这5个请求方法都是由后端定义的,也就是说,因为请求的接口都是请求到后端,然后由后端去操作数据库,把数据进行存储、修改和删除,所以具体的请求方法都是由后端来确定的。
  7. 具体就不介绍每个方法的使用案例了

axios的使用方法(以get为例子)

方法一

axios.get("url").then(function (res) {
    console.log(res);
    }),
function (err) {
    console.log(err);
    }

方法二

axios({
     method: "get",
     url: "url"
}).then(res => {
     console.log(res);
}), (err) => console.log(err)

demo介绍

完整代码

<!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>Document</title>
</head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
</style>

<body>
    <div id="app">
        <input type="button" @click="getJoke" value="点击获取笑话数据">
        <div style="width: 400px;height: 400px; border: 1px solid; overflow: auto;">{{joke}}</div>
    </div>
</body>
<!-- 通过CDN链接axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //vue2写法
    // var app =new Vue({
    //     el:'#app',
    //     data:{

    //     },
    //     methods:{

    //     }
    // }).mount('#app');
    const {
        createApp
    } = Vue
    createApp({
        data() {
            return {
                joke: "通过axios获取笑话"
            }
        },
        methods: {
            getJoke: function () {
                //axios获取后端接口数据方法一
                // console.log(this.joke);
                var that = this
                axios.get("https://autumnfish.cn/api/joke").then(
                        function (res) {
                            console.log(res.data);
                            // console.log(that.joke);
                            that.joke = res.data
                        }),
                    function (err) {
                        console.log(err);
                    }

                //axios获取后端接口数据方法二
                // axios({
                //     method: "get",
                //     url: "https://autumnfish.cn/api/joke"
                // }).then(res => {
                //     console.log(res);
                // }), (err) => console.log(err)
            }
        },
    }).mount('#app')
</script>

</html>

实现效果

案例分析

以上就是通过Vue+axios获取接口数据的示例详解的详细内容,更多关于Vue axios获取接口数据的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文