• 【Vue】通过Axios实现异步通信（简单案例）

    一、Axios介绍

    1、是什么

        Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。当然这些请求ajax和jquery也能做，但是由于Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。这样一来Axios就会更加方便。

    2、特性

    官网连接：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

    b3121e5c032848ad821d31dce4d920fd.png

    3、安装

    使用 npm（使用Vue框架的时候安装）:

    $ npm install axios

    使用 unpkg CDN:

    4、使用语法

    以post和get请求为例（ps:axios的使用有很多种方法）：

    post请求(ps:在URL后可以携带参数)

    axios.post('URL') .then(function(response){  })；

    get请求(ps:在URL后可以携带参数)

    axios.get('URL') .then(function(response){  })；

    二、案例实操

       这里我们通过一个代码段来实现一下axios的数据请求功能。

    ①：我们准备好vue和axios所需的cdn：

    ②：编写一段data.json

    1. {
    2.   "name": "lfy",
    3.   "age": 18,
    4.   "url": "http://baidu.com",
    5.   "page": 1,
    6.   "address": {
    7.     "street": "快乐街",
    8.     "city": "成都",
    9.     "country": "中国"
    10.   },
    11.   "list": ["Java","c++","Php"]
    12. }

    ③：在vue实例中，编写对象接受data.json的数据，并通过前端显示

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <div id="vue">
    10.     <div>{{info.name}}div>
    11.     <div v-for="item in info.list">
    12.         {{item}}
    13.     div>
    14.     <a v-bind:href="info.url">点我a>
    15. div>
    16.  
    17.  
    19. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">script>
    20. <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    21.  
    22. <script type="text/javascript">
    23.     var vm=new Vue({
    24.         el:"#vue",
    25.         data(){//这是一个data函数
    26.             return{
    27.                 //请求的返回参数必须和json字符串格式一样
    28.                 info:{
    29.                     name:null,
    30.                     address:{
    31.                         street:null,
    32.                         city:null,
    33.                         country:null
    34.                     },
    35.                     url:null,
    36.                     list:[]
    37.                 }
    38.             }
    39.         },
    40.         mounted(){//钩子函数 链式编程 ES6新特性
    41.             axios.get('../data.json').then(response=>(console.log(this.info=response.data)))
    42.         }
    43.     });
    44. script>
    45. body>
    46. html>

    效果：

    90c3b40aae964abd8ac0d649aecd18bb.png

    三、总结

       这里写的内容比较简单，只是一个关于axios的介绍和简单的案例演示，希望对正在观看的小伙伴有所帮助！

     

  • 相关阅读:
    openssl生成自签名证书
    迅为STM32MP157开发板安装Qemu-User-Static工具
    java 版本企业招标投标管理系统源码+功能描述+tbms+及时准确+全程电子化
    react源码中的协调与调度
    【Linux】进程探秘
    基于C#实现Windows服务
    舞伴配对模拟
    python-模块与包
    gitpod.io，云端开发调试工具。
    计算机视觉之三维重建-摄像机几何
  • 原文地址：https://blog.csdn.net/qq_51933234/article/details/138131742