Vue（05）——axios异步通信

最新推荐文章于 2023-06-16 13:14:35 发布

万里顾—程

最新推荐文章于 2023-06-16 13:14:35 发布

阅读量199

点赞数 1

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

本文链接：https://blog.csdn.net/wpc2018/article/details/118408460

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

Vue（05）——axios异步通信
- 1、axios概述
- 2、第一个axios小程序

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/vue@2.5.21/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>

在这里插入图片描述

万里顾—程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue（05）——axios异步通信

文章目录Vue（05）——axios异步通信1、axios概述2、第一个axios小程序Vue（05）——axios异步通信1、axios概述axios是一个开源的可以用在浏览器和node.js的异步通信框架，它的作用就是实现ajax异步通信，其功能特点如下：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF摘自axios中文
复制链接

扫一扫