Vue-(04Axios异步通信)

最新推荐文章于 2023-10-16 16:31:22 发布

爱喝椰汁的木木

最新推荐文章于 2023-10-16 16:31:22 发布

阅读量95

点赞数

分类专栏：前端部分文章标签： vue

本文链接：https://blog.csdn.net/qq_45503643/article/details/110285283

版权

前端部分专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，主要作用就是实现 AJAX 异步通信，其功能特点如下：

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

为什么要使用 Axios

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

第一个 Axios 程序

1、开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下。

{
  "name": "小张",
  "url": "https://blog.csdn.net/qq_45503643?spm=1001.2100.3001.5113",
  "sex": "男",
  "address": {
    "street": "莲花街",
    "city": "郑州",
    "country": "中国"
  },
  "links": [
  {
    "name": "csdn",
    "url": "https://blog.csdn.net/qq_45503643?spm=1001.2100.3001.5113"
  },
  {
    "name": "百度",
    "url": "https://www.baidu.com"
  }
 ]
}

2、测试代码

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <!--v-clock:解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--view层 模板-->
<div id="vue" v-clock>
    <div>名称：{{info.name}}</div>
    <div>住址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
    <div>url：<a v-bind:href="info.url" target="_blank">{{info.url}}</a></div>
</div>

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

浏览器效果：

在这里插入图片描述

说明 :

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！
使用v-clock:解决闪烁问题

爱喝椰汁的木木

关注

0
点赞
踩
0

收藏

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

什么是AxiosAxios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，主要作用就是实现 AJAX 异步通信，其功能特点如下：从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API [ JS中链式编程 ]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF（跨站请求伪造）为什么要使用 Axios由于Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC
复制链接

扫一扫