Vue：Axios异步通信

最新推荐文章于 2024-07-26 12:28:02 发布

Gnod33

最新推荐文章于 2024-07-26 12:28:02 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/qq_51620787/article/details/116992615

版权

什么是Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中的异步通信框架，它的主要作用就是实现AJAX异步通信（xhr请求）。

特性

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

官网中文文档：http://www.axios-js.com/zh-cn/docs/

为什么使用Axios？

	最重要的一个原因是，vue的作者推荐使用，再一个这个框架配合vue确实很棒！
	有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。

使用Axios

首先，我们要通过 npm 或一个 CDN 链接等方法安装 axios。

安装

npm：npm install --save axios
cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

测试
1.开发的接口大部分是采用JSON格式所以创建一个data.json文件模拟数据

{
  "name" : "Vueyyds",
  "url": "https://cn.vuejs.org/v2/guide/components.html",
  "page": 1,
  "inNonProfit":true,
  "address": {
    "street": "鼓浪屿",
    "city": "福建厦门",
    "country": "中国"
  },
  "links": [
    {
      "name": "csdnYYDS",
      "url":"https://www.csdn.net/"
    },
    {
      "name" : "皮卡丘",
      "url": "https://wiki.52poke.com/wiki/%E7%9A%AE%E5%8D%A1%E4%B8%98"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

2.Axios.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--解决Vue闪烁问题-->
<style>
    [v-cloak]{
        display: none;
    }
</style>

<div id="app" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
<!--    v-bind绑定这个超链接才能拿到info.url-->
    <a v-bind:href="info.url">点我</a>
</div>

<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--使用cdn在线压缩的axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
       //model层
       //  data:属性 | data(){}:方法，这边要return返回数据得用方法而不能使用属性
        data(){
            return{
                //请求的返回参数合适，必须和json字符串一样
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info=response.data))
        }

    })
</script>


</body>
</html>

结果演示：
在这里插入图片描述

说明：

<a v-bind:href="info.url">点我</a>

在这里使用了v-bind将a：href的属性值与Vue实例中的数据进行绑定

axios.get('../data.json')

使用axios框架的get方法请求Ajax并自动将数据封装进了Vue实例的数据对象中

mounted(){//钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info=response.data))
        }

mounted(){}:
Vue生命周期中的钩子函数，链式编程，获取到json文件中的数据，用来向后端发起请求拿到数据以后做一些业务处理

4. 注意：我们在data中的数据格式必须与Ajax响应回来的数据格式匹配

Vue的生命周期

1.生命周期图示：
在这里插入图片描述

Gnod33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue：Axios异步通信

什么是Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中的异步通信框架，它的主要作用就是实现AJAX异步通信（xhr请求）。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF （跨站请求伪造）官网中文文档：http://www.axios-js.com/zh-cn/d
复制链接

扫一扫