javascript学习 - Axios 简单使用指南

泡芙萝莉酱

于 2024-08-03 09:00:00 发布

阅读量821

点赞数 22

分类专栏： JavaScript 文章标签： javascript 学习开发语言前端

本文链接：https://blog.csdn.net/paofuluolijiang/article/details/140879721

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、概述

1. 什么是 Axios ？

Axios 是一个开源的基于 promise 的 HTTP 请求库，一般常用于浏览器和 node.js 中。它能够在具有相同代码库的浏览器和 nodejs 中同时运行，在服务器侧，它利用服务器端原生的 node.js http 模块，而在客户端侧（一般是浏览器），则使用的是 XMLHttpRequest。

从 Vue 2.0 版本开始，就极力推荐使用 Axios 来进行 ajax 请求，其源码仓库为：

https://github.com/axios/axios

2. 特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
支持自动转换 JSON 数据
客户端侧支持防御 XSRF

3. Axios 的安装

Axios 安装主要有两种方式，一种是通过引入 CDN，另一种则是通过 npm 进行安装，两中安装的方式介绍如下。

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 npm

npm install axios

二、Axios 的使用

Axios 提供了两种不同的方式来发送 HTTP 请求，其中一种是直接通过 axios() 方法，而另一种则是通过 axios 对象提供的跟 HTTP 方法对应起来的方法来发起请求，例如：

axios.get()
axios.post()
axios.update()
axios.put()
……

1. get 请求

语法

axios.get(url?key=value&key2=value2).then(function(response){}, function(err){});

实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Axios 使用</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="container">
			<button class="btn btn-primary">GET 请求</button>
		</div>
		<script>
			const btn = document.querySelector("button");
			btn.onclick = function() {
				axios.get("https://www.baidu.com/s?wd=村").then(response => {
					console.log(response)
				});
			}
		</script>
	</body>
</html>

2. post 请求

语法：

axios.post(url, {key=value, key2=value2}).then(function(response){}, function(err){});

实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Axios 使用</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="container">			
			<button class="btn btn-warning">POTST 请求</button>
		</div>
		<script>
            data: {
                wd: "村"
            }
			const btn = document.querySelector("button");           
			btn.onclick = function() {
				axios.post('https://www.baidu.com/s', data).then(response => {
					console.log(response)
				});
			}
		</script>
	</body>
</html>

3. put 请求

语法

axios.put(url, {key=value, key2=value2}).then(function(response){}, function(err){});

实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Axios 使用</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="container">
			<button class="btn btn-success">PUT 请求</button>
		</div>
		<script>
			data: {
				name: "村",
				id: "cuu143"
			}
			const btn = document.querySelector("button");
			btn.onclick = function() {
				axios.put('https://www.baidu.com/s', data).then(response => {
					console.log(response)
				});
			}
		</script>
	</body>
</html>

4. delete 请求

语法

axios.delete(url?key=value&key2=value2).then(function(response){}, function(err){});

实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Axios 使用</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="container">
			<button class="btn btn-danger">DELETE 请求</button>
		</div>
		<script>
			const btn = document.querySelector("button");
			btn.onclick = function() {
				axios.delete("https://www.baidu.com/s?wd=村").then(response => {
					console.log(response)
				});
			}
		</script>
	</body>
</html>

三、总结

以上就是本文的所有内容了，主要介绍了 Axios 的定义、特性、如何安装以及所支持的浏览器，然后介绍了如何使用 Axios 来模拟发起最常用的 GET、POST、PUT 以及 DELETE 请求。

泡芙萝莉酱

关注

22
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javascript学习 - Axios 简单使用指南

Axios是一个开源的基于promise的HTTP请求库，一般常用于浏览器和node.js中。它能够在具有相同代码库的浏览器和nodejs中同时运行，在服务器侧，它利用服务器端原生的node.jshttp模块，而在客户端侧（一般是浏览器），则使用的是。从Vue 2.0版本开始，就极力推荐使用Axios来进行ajax以上就是本文的所有内容了，主要介绍了Axios的定义、特性、如何安装以及所支持的浏览器，然后介绍了如何使用Axios来模拟发起最常用的GETPOSTPUT以及DELETE请求。
复制链接

扫一扫

专栏目录