vue中Axios异步通信

最新推荐文章于 2022-08-24 14:47:27 发布

少年西西

最新推荐文章于 2022-08-24 14:47:27 发布

阅读量312

点赞数

分类专栏： F_java框架阶段 # F5_VUE框架文章标签： vue axios

本文链接：https://blog.csdn.net/qq_45554909/article/details/111555030

版权

F_java框架阶段同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

F5_VUE框架

9 篇文章 2 订阅

订阅专栏

1.什么是Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 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 的通信功能，为了解决通信问题，作者单独开发了一个名为 vueresource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用 jQuery，因为它操作Dom太频繁！
格式：
1.get请求方式

axios.get('请求地址', {
    params: {
      "参数名": "传递的参数"
    }
  })
  .then(function (res) {
    console.log("返回结果==>",res);
  })
  .catch(function (error) {
    console.log(error);
  });

2.post请求方式

axios.post('请求地址', {
     "参数名": "传递的参数",
     "参数名": "传递的参数"'
  })
  .then(function (response) {
   console.log("返回结果==>",res);
  })
  .catch(function (error) {
    console.log(error);
  });

3.第一个 Axios 应用程序

cdn 引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1、咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，
在这里插入图片描述

数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下。

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "address": {
    "street": "洪崖洞",
    "city": "重庆市",
    "country": "中国"
  },
  "hobby": ["sing","dance","draw"]
}

2、测试代码

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--引入axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<style>
    /*v-cloak 解决闪烁问题*/
    [v-cloak]{
        display: none;
    }
</style>
<body>


<div id="vue" v-cloak="">
    <p>名称：{{info.name}}</p>
    <p>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</p>
    <!--_blank:开启百度(新窗口)-->
    <p>链接：<a v-bind:href="info.url" target="_blank">百度</a></p>
    <p>爱好：{{info.hobby}}</p>
</div>

</body>

<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        //此刻data是一个方法，之前的是属性
        data(){
            return {
                info:{
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street:null
                    },
                    url:null,
                    hobby: null
                }
            }
        },
        mounted(){//钩子函数
            axios
                .get('../data.json')
                .then(response => (this.info = response.data));
        }
    });
</script>
</html>