ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue网络通信--异步通信

2022-07-27 10:31:57  阅读:114  来源: 互联网

标签:info 异步 Vue name -- js ajax null data


Vue网络通信--异步通信

Axios概述

Axios,是一个基于promise的网络请求库,作用于node.js中在服务器端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

主要特点:

  • 从浏览器创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防御XSRF

和ajax区别

ajax技术实现了局部数据的刷新,而axios实现了对ajax的封装

==ajax : 用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。

==axios: 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

mounted()

获取数据

var app= new Vue({
   el:"#list",
   //data:是属性
   //data(){}是方法,方法中的return接受获取到的数据
   data(){
       return {
           info:{
               //格式与json格式必须一毛一样
               name:null,
               address:{
                   street:null,
                   city:null,
                   country:null
              },
               links:[
                  {name:null},
                  {name:null},
                  {name:null}
              ]

          }
      }
  },
   mounted(){
       //通过get()从data文件中获取json数据,response响应,箭头指向产生的事情
       axios.get('data.json').then(response=>(this.info=response.data));
  }//钩子函数
})

渲染至前端

<div id="list">
   <!-- 将获取到的数据渲染到前端 -->
   <div>{{info.address.street}}</div>
   <div>{{info.address.city}}</div>
   <div>{{info.address.country}}</div>
</div>

==注意==

使用data(),用return接收返回数据,仅在组件内可见,如果使用data,则是全局可见,容易造成数据污染

标签:info,异步,Vue,name,--,js,ajax,null,data
来源: https://www.cnblogs.com/lerrysee/p/16523827.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有