axios异步面试题 axios是异步

转载

mob64ca1411a6fc 2024-04-15 19:40:20

文章标签 axios异步面试题 vue ios 数据 Vue 文章分类 iOS 移动开发

1.什么是Axios

Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通讯框架，它的主要做用就是实现 AJAX 异步通讯，其功能特色以下：

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

2.为何要使用 Axios

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

3.第一个Axios程序

1.生命周期

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

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

axios异步面试题 axios是异步_数据

中文注解

Ajax网络通信时机

2.代码实现

创建一个JSON格式的资源文件，让Vue使用Ajax来获取

{
  "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/"
    }
  ]
}

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>狂神说Java</title>
</head>
<body>

<div id="vue">

</div>

<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        mounted(){
            axios.get("../../../data.json").then(response=>console.log(response.data));
        }
    });
</script>

</body>
</html>

    可见，axios使用方法其实和jQuery.ajax语法差不多，jQuery.ajax使用语法：$.ajax(对象参数)，当然ajax可以换成get/post()，这两个本质上还是对ajax()的封装
    钩子函数使用语法：钩子函数名称(){ 方法体 }，方法体就是你想在这个钩子函数被调用的时候做些什么
    在一开始就说了，vue的网络通信使用axios来实现，而axios的使用语法就是：axios.调用的方法名称(“数据的URI”).then(respnotallow=>{ 获取到响应之后要做什么 })

axios异步面试题 axios是异步_axios异步面试题_02

axios异步面试题 axios是异步_数据_03

3.数据渲染

当然，我们获取数据的目的总是将它渲染在前端页面上，而视图模板上的数据都需要在data对象属性中进行注册之后再去模板中使用，那么我们就应该将我们使用ajax请求到的数据和data中注册的变量绑定起来
这里我们又要使用一个方法，它就专门用来解决返回的数据和data对象属性中变量注册问题

//使用语法
data(){//data方法
    return{
        //data中的变量注册
    }
}

data(){//data方法
    return{
        //注意，前端接收JSON数据的时候，格式必须和JSON字符串的格式保持一致才能正确解析
        info:{
            name: null,
            url: null,
            address: {
                street: null,
                city: null,
                country: null
            }
        }
    }
},

注意，前端接收JSON数据的时候，格式必须和JSON字符串的格式保持一致才能正确解析

axios异步面试题 axios是异步_vue_04