Vue的学习 —— <网络请求库Axios>

目录

前言

正文

一、Axios基本概念

二、安装Axios

三、Axios使用方法

四、向服务器发送请求


前言

在之前的开发案例中,我们通常直接在组件中定义数据。但在实际的项目开发中,我们需要从服务器获取数据。当其他用户希望访问我们自己编写的网页时,服务器就显得尤为重要。在传统的网页开发中,我们通常使用Ajax来实现JavaScript程序与服务器之间的交互。而在Vue框架中,更推荐使用Axios库来实现这种交互。

正文

一、Axios基本概念

Axios是一个基于Promise的HTTP库,可以发送get、post等请求,它作用于浏览器和Node.js中。当运行在浏览器时,使用XMLHttpRequest接口发送请求;当运行在Node.js时,使用HTTP对象发送请求。

Axios的主要特性如下:

  • 支持所有的 API。

  • 支持拦截请求和响应。

  • 可以转换请求数据和响应数据,并可以将响应的内容自动转换为JSON类型的数据。

  • 安全性高,客户端支持防御跨站请求伪造(Cross-Site Request Forgery,CSRF)。

二、安装Axios

Axios的安装方式主要有两种,一种是通过标签引入,另一种是使用包管理工具安装。

  1. 通过标签引入:使用Unpkg的CDN服务引入Axios。

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. 使用包管理工具引入

    import axios from 'axios'
    const request = axios.create({timeout: 2000
    })
    export default request

下面演示使用包管理工具安装Axios:

打开cmd命令行窗口进入到D:\webProject\Demo05\my-router目录中,执行"yarn add axios --save"安装命令,效果如下图所示:

三、Axios使用方法

在项目中使用Axios时,通常的做法是先将Axios封装成一个模块,然后在组件中导入模块。

  1. 将Axios封装成模块,创建src\axios\request.js文件,示例代码如下:

    import axios from 'axios'
    const request = axios.create({timeout: 2000
    })
    export default request
  2. 在组件中导入模块,在src\App.vue文件中导入模块,示例代码如下:

    import request from './axios/request.js'

Axios常用的请求方式:get请求和post请求,示例代码如下

  1. 使用Axios发送get请求的基本语法格式:

    request({url: '请求路径',method: 'get',params: { 参数 }
    }).then(res => {console.log(res)
    }).catch(error => {console.log(error)
    })
  2. 使用Axios发送post请求的基本语法格式:

    request({url: '请求路径',method: 'post',data: { 参数 }
    }).then(res => {console.log(res)
    }).catch(error => {console.log(error)
    })

四、向服务器发送请求

下面演示通过axios向查询ip网站的服务器地址:httpbin.org/get发送请求,获取本机网络信息,打印到开发者控制台。

代码:

request({url:"https://httpbin.org/get",method:'get'
}).then((sucess) => {console.log(sucess)
}).catch((error) => {console.log(error)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13218.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

定档 11.2-3,COSCon'24 第九届中国开源年会暨开源社十周年嘉年华正式启动!

中国开源年会 COSCon 是业界最具影响力的开源盛会之一&#xff0c;由开源社在2015年首次发起&#xff0c;今年将举办第九届。 以其独特定位及日益增加的影响力&#xff0c;COSCon 吸引了越来越多的国内外企业、高校、开源组织/社区的大力支持。与一般企业、IT 媒体、行业协会举…

网络安全快速入门(十三)linux及vmware软件的网络配置

13.1 前言 在通过我们前面的了解&#xff0c;我们现在已经对Linux的基础知识有了大致的了解&#xff0c;今天我们来大概讲一下关于linux系统及vmware的网络配置问题&#xff0c;在这之前&#xff0c;我们需要对网络有一个大概的认识和了解&#xff0c;话不多说&#xff0c;我们…

01记-“计算机基础知识”

感觉媒体: 直接作用于人的感觉器官&#xff0c;使人产生直接感觉的媒体&#xff1a;声音、图形、图像、动画等。 表示媒体: 为了加工、处理和传输感觉媒体而人为研究、构造出来的一种媒体&#xff0c;常见的有各种编码方式&#xff0c;如文本编码、图像编码和声音编码等。 …

Java中静态方法为什么不能调用非静态成员?

在Java面试中&#xff0c;这个问题经常被问到&#xff0c;因为它不仅涉及到Java的基本语法规则&#xff0c;还深入到了JVM的工作机制。理解这个问题可以帮助面试者更好地掌握Java的静态和非静态成员的区别以及它们在内存中的分配和使用。 静态成员 vs 非静态成员 首先&#x…

AtCoder Beginner Contest 318 A题 Full Moon

A题&#xff1a;Full Moon 标签&#xff1a;模拟、数学题意&#xff1a;给定一个起始 m m m和上限 n n n&#xff0c;每次增量 p p p&#xff0c;求能加几次。题解&#xff1a;数据比较小&#xff0c;可以直接暴力&#xff1b;数学方法算的话&#xff0c;注意边界。代码&#…

HNU-算法设计与分析-作业5

第五次作业【回溯算法】 文章目录 第五次作业【回溯算法】<1> 算法分析题5-3 回溯法重写0-1背包<2> 算法分析题5-5 旅行商问题&#xff08;剪枝&#xff09;<3> 算法实现题5-2 最小长度电路板排列问题<4> 算法实现题5-7 n色方柱问题<5> 算法实现…

时间格式数据向前或向后归于整时

假设你有一个“时:分:秒”的时间格式数据&#xff0c;例如"12:34:56"&#xff0c;你想要将它向前归整于整时或者向后归整于整时&#xff0c;可以按照以下方法进行处理&#xff1a; 1、向前归整于整时&#xff1a;将分钟和秒数设置为0 import datetime# 原始时间 ti…

公共字段填充(AOP的使用)

Thread是线程池,ThreadLocal是线程变量,每个线程变量是封闭的,与其它线程变量分隔开来,在sky-common下的com.sky.context包下有一个Basecontext类 public class BaseContext {//每一个上下文创建了一个线程变量,用来存储long类型的id//创建三个方法,用来设置,取用,删除idpubli…

绝地求生:PGS3参赛队伍跳点一览,17压力有点大,4AM与PeRo大概率不roll点

在PCL春季赛结束后&#xff0c;PGS3的参赛队伍名单以及分组就正式确定了&#xff0c;最后确定名额的DDT和NH被安排在了A组和B组&#xff0c;感觉这次PGS3的分组比较均衡&#xff0c;没有“死亡之组”一说。这段时间已经有网友汇总了PGS3队伍在各个地图的跳点&#xff0c;并且把…

「AIGC算法」近邻算法原理详解

本文主要介绍近邻算法原理及实践demo。 一、原理 K近邻算法&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09;是一种基于距离的分类算法&#xff0c;其核心思想是距离越近的样本点&#xff0c;其类别越有可能相似。以下是KNN算法的原理详解&#xff1a; 1. 算…

python安装ESPHome

1. powershell输入python 或者 python3 可以查看python版本&#xff0c;没安装则会自动跳出微软商店&#xff0c;安装即可(注意这里会自动安装在C盘默认路径) 2. pip3 install esphome -i https://mirrors.aliyun.com/pypi/simple 3. 根据报错信息找到esphome的安装目录&…

python脚本编辑oss文件

1、安装oss2库 rootubuntu:~# pip3 install oss2 Collecting oss2Downloading oss2-2.18.5.tar.gz (283 kB)|████████████████████████████████| 283 kB 6.9 MB/s Collecting aliyun-python-sdk-core>2.13.12Downloading aliyun-python-s…

Vmvare—windows中打不开摄像头

1、检查本地摄像头是否能正常打开 设备管理器—查看—显示隐藏设备—选中照相机—启动 USB2.0 HD UVC—打开相机查看 2、检查虚拟机的设置 虚拟机—虚拟机—可移动设备—USB2.0 HD UVC—勾选在状态栏中显示 虚拟机—打开windows主机—右小角选中圆圈图标—勾选连接主机 此时…

Android14音频进阶之ADSP调试(七十二)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP…

Java | Leetcode Java题解之第91题解码方法

题目&#xff1a; 题解&#xff1a; class Solution {public int numDecodings(String s) {int n s.length();// a f[i-2], b f[i-1], cf[i]int a 0, b 1, c 0;for (int i 1; i < n; i) {c 0;if (s.charAt(i - 1) ! 0) {c b;}if (i > 1 && s.charAt(i …

小红书笔记怎么发浏览量高?

小红书笔记发布是有技巧和策略的&#xff0c;为什么有的小红书笔记浏览量那么高&#xff0c;是因为下足了功夫&#xff0c;小红书笔记怎么发浏览量高&#xff1f;今天伯乐网络传媒就来给大家揭秘一下。 一、选题与定位 1. 热门话题选择 要想提高小红书笔记的浏览量&#xff0…

虚拟化技术 使用vSphere Web Client管理ESXi主机

一、实验内容 通过vSphere Web Client将ESXi主机连接到iSCSI共享存储通过vSphere Web Client&#xff0c;使用共享存储创建虚拟机并安装windows 2008 R2操作系统通过vSphere Web Client&#xff0c;为虚拟机创建快照 二、、实验主要仪器设备及材料 安装有64位Windows操作系统…

Redis如何避免数据丢失?——AOF

目录 AOF日志 1. 持久化——命令写入到AOF文件 写到用户缓冲区 AOF的触发入口函数——propagate 具体的实现逻辑——feedAppendOnlyFile 从用户缓冲区写入到AOF文件(磁盘&#xff09; 函数write、fsync、fdatasync Redis的线程池 AOF文件的同步策略 触发的入口函数——…

24.HashMap的扩容机制

ps&#xff1a;没看太懂源码&#xff0c;不确定是否正确... 一、扩容条件 当HashMap中元素的总个数超过&#xff08;threshold&#xff09;阈值&#xff08;数组容量乘以负载因子&#xff09;时&#xff0c;会触发扩容。默认情况下&#xff0c;&#xff08;capacity&#xff0…

JavaScript函数声明

JS函数声明 JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别 语法1&#xff1a;function 函数名 (参数列表){函数体} 语法2&#xff1a;var 函数名 function (参数列表){函数体} 函数说明 函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即…