Vue(8) —— Axios异步通信

最新推荐文章于 2023-04-25 08:39:07 发布

原来是小别扇

最新推荐文章于 2023-04-25 08:39:07 发布

阅读量298

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Jzandth/article/details/108771856

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1.什么是Axios

Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通讯框架，它的主要做用就是实现 AJAX 异步通讯，其功能特色以下：

从浏览器中建立 XMLHttpRequests
从 node.js 建立 http 请求
支持 Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防护 XSRF（跨站请求伪造）

GitHub.
中文文档.

2.为何要使用 Axios

因为 Vue.js 是一个视图层框架而且做者（尤雨溪）严格准守 SoC （关注度分离原则），因此 Vue.js 并不包含 AJAX 的通讯功能，为了解决通讯问题，做者单独开发了一个名为 vue-resource的插件，不过在进入 2.0 版本之后中止了对该插件的维护并推荐了 Axios 框架。少用jQuery，由于它操做Dom太频繁！

3.第一个Axios程序

1.生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等—系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例
在这里插入图片描述

中文注解

Ajax网络通信时机

2.代码实现

创建一个JSON格式的资源文件，让Vue使用Ajax来获取

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂伸说java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>狂神说Java</title>
</head>
<body>

<div id="vue">

</div>

<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        mounted(){
            axios.get("../../../data.json").then(response=>console.log(response.data));
        }
    });
</script>

</body>
</html>

    可见，axios使用方法其实和jQuery.ajax语法差不多，jQuery.ajax使用语法：$.ajax(对象参数)，当然ajax可以换成get/post()，这两个本质上还是对ajax()的封装
    钩子函数使用语法：钩子函数名称(){ 方法体 }，方法体就是你想在这个钩子函数被调用的时候做些什么
    在一开始就说了，vue的网络通信使用axios来实现，而axios的使用语法就是：axios.调用的方法名称(“数据的URI”).then(response=>{ 获取到响应之后要做什么 })

在这里插入图片描述

3.数据渲染

当然，我们获取数据的目的总是将它渲染在前端页面上，而视图模板上的数据都需要在data对象属性中进行注册之后再去模板中使用，那么我们就应该将我们使用ajax请求到的数据和data中注册的变量绑定起来
这里我们又要使用一个方法，它就专门用来解决返回的数据和data对象属性中变量注册问题

//使用语法
data(){//data方法
    return{
        //data中的变量注册
    }
}

data(){//data方法
    return{
        //注意，前端接收JSON数据的时候，格式必须和JSON字符串的格式保持一致才能正确解析
        info:{
            name: null,
            url: null,
            address: {
                street: null,
                city: null,
                country: null
            }
        }
    }
},

注意，前端接收JSON数据的时候，格式必须和JSON字符串的格式保持一致才能正确解析
在这里插入图片描述
在data()中定义好的变量可以像data中的变量一样去视图中使用

但是我们需要注意，我们还没有将获取到的json数据和我们在data()中定义的变量绑定起来，所以直接去看效果是看不到的

测试

在测试的时候由于加载顺序的问题，会先实现我们的数据模板，然后再显示渲染之后的数据，这样显然用户体验是不好的，所以我们需要解决一下这个问题
多测试一个数据的使用，我们测试一下url和a标签之间的使用

原来是小别扇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(8) —— Axios异步通信

目录1.什么是Axios2.为何要使用 Axios3.第一个Axios程序1.生命周期2.代码实现3.数据渲染1.什么是Axios    Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通讯框架，它的主要做用就是实现 AJAX 异步通讯，其功能特色以下：从浏览器中建立 XMLHttpRequests从 node.js 建立 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自
复制链接

扫一扫