Axios 简单使用指南
作者：村雨遥
不要哀求，学会争取，若是如此，终有所获
🎈 号外
最近，公众号之外，建立了微信交流群，不定期会在群里分享各种资源（影视、IT 编程、考试提升……）&知识。如果有需要，可以扫码或者后台添加小编微信备注入群。进群后优先看群公告，呼叫群中【资源分享小助手】，还能免费帮找资源哦～
一、概述
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
html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>- 使用 npm
bash
npm install axios4. 支持的浏览器
二、Axios 的使用
Axios 提供了两种不同的方式来发送 HTTP 请求，其中一种是直接通过 axios() 方法，而另一种则是通过 axios 对象提供的跟 HTTP 方法对应起来的方法来发起请求，例如：
axios.get()axios.post()axios.update()axios.put()- ……
1. get 请求
- 语法
js
axios.get(url?key=value&key2=value2).then(function(response){}, function(err){});- 实例
html
<!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 请求
- 语法：
js
axios.post(url, {key=value, key2=value2}).then(function(response){}, function(err){});- 实例
html
<!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 请求
- 语法
js
axios.put(url, {key=value, key2=value2}).then(function(response){}, function(err){});- 实例
html
<!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: "cunyu1943"
}
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 请求
- 语法
js
axios.delete(url?key=value&key2=value2).then(function(response){}, function(err){});- 实例
html
<!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 请求。
⏳ 联系
想解锁更多知识？不妨关注我的微信公众号：村雨遥（id：JavaPark）。
扫一扫，探索另一个全新的世界。
贡献者
村雨遥