欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue(05)——axios异步通信

程序员文章站 2022-07-12 19:28:38
...

Vue(05)——axios异步通信

1、axios概述

axios是一个开源的可以用在浏览器和node.js的异步通信框架,它的作用就是实现ajax异步通信,其功能特点如下:

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

摘自axios中文文档:http://www.axios-js.com/zh-cn/docs/

为什么要使用axios

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

2、第一个axios小程序

我们开发的接口大部分都是json格式,可以现在项目里模拟一段JSON数据,数据内容如下:创建一个名为data.json的文件并填入下面的内容,放在项目的个目录下。

{
  "name": "狂神说java",
  "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/"
    }
  ]
}

再写一个测试的html页面:
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

<!DOCTYPE html >
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    [v-clock]{
        display: none;
    }
</style>
<body>
<script type="text/javascript"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>




<div id="app" v-clock>

    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.country}}</div>
    <a v-bind:href="info.url">个人博客</a>

</div>


<script>
    var vm = new Vue({
        el: '#app',
        data(){
          return{
              info:{
                  name: null,
                  url: null,
                  address: {
                      //请求反回参数必须和json字符串中的一样
                      street: null,
                      city: null,
                      country: null
                  }
              }
            }
        },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=(response.data)));
        }

    });
</script>

</body>
</html>

Vue(05)——axios异步通信

相关标签: Vue vue axios