VUE-05-Axios异步通信

最新推荐文章于 2023-07-31 10:27:10 发布

Void_CM

最新推荐文章于 2023-07-31 10:27:10 发布

阅读量188

点赞数

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

本文链接：https://blog.csdn.net/baidu_41656912/article/details/115317203

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE-05-Axios异步通信

概述

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

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

理由

Vue.js是一个视图层框架,并且作者(尤雨溪)严格遵守SoC(关注度分离原则),所以Vue.js并不包含AJAX的通信功能,为了解决通信问题,推荐使用Axios,其实jQuery中也封装了ajax,但是它对DOM的操作很频繁

data.json

{
  "name":"中国",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "白杨街道",
    "city":"浙江杭州",
    "country": "中国"
    },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            /*--未加载结束白屏*/
            display: none;
        }
    </style>

</head>
<body>
    <div id="vue" v-cloak>
        <div>{{info.name}}</div>
        <div>{{info.address.street}}</div>
        <a v-bind:href="info.url">点我跳转</a>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#vue",
            //data 是属性
            data(){//这个是方法
                return{
                    //请求的返回参数格式,必须和json字符串格式一样
                    info:{
                        name:null,
                        address:{
                            street:null,
                            city:null,
                            country:null
                        },
                        url:null
                    }
                }
            },
            mounted(){//钩子函数 链式编程
                axios.get('data.json').then(res=>{
                    this.info = res.data
                })
            }
        });
    </script>
</body>
</html>

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-05-Axios异步通信

VUE-05-Axios异步通信概述Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御XSRF(跨站请求伪造)理由Vue.js是一个视图层框架,并且作者(尤雨溪)严格遵守SoC(关注度分离原则),所以Vue.js并不包含AJAX
复制链接

扫一扫