【Vue】5.Axios（异步通信）

最新推荐文章于 2024-05-12 09:34:07 发布

待我学业归来。

最新推荐文章于 2024-05-12 09:34:07 发布

阅读量125

点赞数

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

本文链接：https://blog.csdn.net/qq_44859586/article/details/111276679

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.简介

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

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

【官方】： http://www.axios-js.com/docs/

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以Vue.js 并不包含 AJAX 的通信功能。为了解决通信问题，且少用jQuery（因为它操作Dom太频繁！），所以就推荐使用Axios。

2.第一个Axios程序

咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据。

data.json

{
  "name": "哈哈哈",
  "url": "https://baidu.com",
  "page": 1,
  "address": {
    "street": "奥特曼",
    "city": "阳光",
    "country": "日本"
  }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js  cdn 官方:https://cn-.vuejs.org/v2/guide/installation.html-->
    <!--导入axios cdn  官方：http://www.axios-js.com/docs/-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    <!--v-cloak 解决闪烁问题-->
      <style>
       [v-cloak] {
              display: none
           }
      </style>
</head>
<body>
<div id="vue" v-cloak>
      <div>名称：{{info.name}}</div>
      <div>地址：{{info.address.country}}-{{info.address.city}}- {{info.address.street}}</div>
      <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
</div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        //这是data（）方法  之前的是 data： 属性
        data() {
            return {
                info: {
                        name: null,
                        address: {
                            country: null,
                            city: null,
                            street: null
                        },
                        url: null
                    }
            }
        },
        mounted() { //钩子函数  链式编程  ES6新特性
            axios.get('../data.json').then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>