Vue之Axios的异步通信详解

目录
  • 1.什么是Axios
  • 2、为什么要使用Axios
  • 3、第一个Axios应用程序
  • 4、Vue的生命周期
  • 总结

1.什么是Axios

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

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

GitHub：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

2、为什么要使用Axios

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

3、第一个Axios应用程序

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

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说Java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

测试代码

<!DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-cloak 解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="vue">
    <div>地名：{{info.name}}</div>
    <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
    <div>链接：<a v-binf: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：属性：vm
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数
            axios
                .get('data.json')
                .then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>

说明：

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

2.使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中我们在data中

3.的数据结构必须和Ajax响应回来的数据格式匹配！

4、Vue的生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 基于axios在vue中的使用

    基于axios在vue中的使用

    目录 一.Axios是什么 二.Axios有哪些特性 三.Axios浏览器支持 四.安装 1.使用 npm 2.使用 bower 3.使用 cdn 五.用法(vue项目已搭建) 1. Axios基础用法(get.post.put 等请求方法) 2. Axios进阶用法(实例.配置.拦截器.取消请求等) 3.Axios进一步封装,在项目中的实际应用 一.Axios是什么 Axios是一个基于promise的HTTP库(类似于jQuery的Ajax,用于HTTP请求) 可以用于浏览器和node.js

  • vue中axios的使用详解

    vue中axios的使用详解

    目录 1.选择什么网络模块 2.JSONP 3.axios的请求方式 4.axios框架的基本使用 1.新建vue项目 2.安装axios依赖 3.编写代码 4.请求结果 5.axios发送并发请求 方式1: 方式2 6.axios的配置 6.1.全局配置 6.2.常见的配置选项 总结 1.选择什么网络模块 2.JSONP 3.axios的请求方式 网络请求模拟:http://httpbin.org/ 4.axios框架的基本使用 1.新建vue项目 vue init webpack learn

  • Vue之Axios异步通信详解

    Vue之Axios异步通信详解

    1.首先我们创建一个.json文件,作为交互使用,我们列举json数据格式模拟传递到前端来帮助小伙伴们理解. { "name": "咸鱼_翻身", "url": "https://blog.csdn.net/aaa123_456aaa", "page": 1, "address": { "street": "湘桥区", "city&quo

  • 解决vue跨域axios异步通信问题

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi

  • Vue之Axios的异步通信详解

    Vue之Axios的异步通信详解

    目录 1.什么是Axios 2.为什么要使用Axios 3.第一个Axios应用程序 4.Vue的生命周期 总结 1.什么是Axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下: 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API[JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF(跨站请求伪造)

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

  • vue interceptor 使用教程实例详解

    vue interceptor 使用教程实例详解

    二次封装axios,根据参数来实现多个请求多次拦截 1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let CancelToken = axios.CancelToken //设置默认请求头,如果不需要可以取消这一步 axios.defaults.headers = { 'X-Requested-With': 'XMLHttpRequest' } // 请求超时的时

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • JavaScript封装axios的实现详解

    目录 摘要 1.post方法 2.create方法 3.拦截器 4.代码 摘要 在vue中,我们调用接口使用的都是axios,使用之前我们也会进行一定的封装,然后再进行使用. 在这里,我们主要说一下axios的实现原理,以及如何使用原生的js来自己封装出一个axios. 这里实现出几个主要的方法,包括post请求方法,create配置方法,以及拦截器的方法. 1.post方法 在我们写方法之前,肯定是要先自己写一个类出来,里面的内容先不用写. 然后再在类的下面写出post的方法: functio

  • vue系列之动态路由详解【原创】

    vue系列之动态路由详解【原创】

    开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案. 本文目录: 一: 设想 二: 讨论 三:实现 四:总结 一: 设想 简单解释下上图就是: 首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端:前端将这个token保存下来,为了让在浏览器新

  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

随机推荐