Axios详解

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 A JAX 异步通信。
其主要功能如下

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

Axios官网就是一个github Github

为什么要使用 Axios

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以
Vue.js 并不包含 A JAX 的通信功能，为了解决通信问题，使用了Axios框架

第一个Axios应用程序

在这里插入图片描述

1.咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 axios.json 的文件并填入上面的内容，放在项目的根目录下。

axios.json

{
  "name": "冷丁",
  "url": "https://blog.csdn.net/qq_41359998?spm=1011.2124.3001.5343",
  "page": 1,
  "address": {
    "street": "海淀",
    "city": "北京",
    "country": "中国"
  }
}
1
2
3
4
5
6
7
8
9
10

2.测试代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="vue">
    <div>名称:{{info.name}}div>
    <div>地址:{{info.address.country}}-{{info.address.city}}-{{info.address.street}}div>
    <div>链接：<a v-bind:href="info.url" target="_blank" >博客地址a>  div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>

<script>
    var vm=new Vue({
        el:'#vue',
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    url:null
                }
            }
        },
        mounted(){
            axios.get('axios.json').then(response=>(this.info=response.data));
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这里插入图片描述
说明 :

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！

注意：
如果网速过慢，可能导致加载数据时存在闪烁问题，解决闪烁问题，可以使用v-cloak标签，让页面在数据加载完毕之前处于白屏状态。
在这里插入图片描述

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

相关阅读:
Slax Linux 获得增强的会话管理和启动参数选项
电脑重装系统后如何设置 win11 的默认登录方式
vue3路由跳转传参
Android 13 “鸡肋”？可它跑起了 Windows 11、Linux 发行版
VueUI Day03(8.2)MintUI、Header 组件、Field 组件、Navbar 组件、脚手架项目图片的访问方式、Tabbar 组件
震撼来袭，最具中国特色的微服务组件：新一代SpringCloud Alibaba
Android中如何知道我使用的是 AndroidX 库还是 Support Library
5个 Istio 访问外部服务流量控制最常用的例子，你知道几个？
Apache解析漏洞复现
ArkUI-X+HarmonyOS Next跨平台App开发

原文地址：https://blog.csdn.net/qq_41359998/article/details/122886102