本文详细介绍了axios的使用，包括json-Server服务搭建、axios基本使用、请求响应结果结构等，并深入源码分析，探讨axios创建过程、发送请求、拦截器及取消请求的工作原理。
目录
一.axios使用
1.json-Server服务搭建
json-Server可以快速搭建http服务，首先用命令行安装
npm install -g json-server然后创建一个db.json文件
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"id": 2,
"title": "尚硅谷大厂学院上线啦",
"author": "小编"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
},
{
"body": "喜大普奔",
"postId": 2,
"id": 2
}
],
"profile": {
"name": "typicode"
}
}最后在db.json文件所在文件夹目录下启动服务
json-server --watch db.json2.axios的介绍与页面配置
2.1. axios
是什么
?
1.
前端最流行的
ajax
请求库
2. react/vue
官方都推荐使用
axios
发
ajax
请求
2.2. axios
特点
1.
基于
xhr + promise
的异步
ajax
请求库
2.
浏览器端
/node
端都可以使用
3.
支持请求／响应拦截器
4.
支持请求取消
5.
请求
/
响应数据转换
6.
批量发送多个请求
2.3. axios 安装
1.
npm install axios
2.
bower install axios
3.
yarn install axios
这里使用CND的方式直接引入： <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios配置</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<script>
console.log(axios);
</script>
</body>
</html>3.axios的基本使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios基本使用</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//第一个
btns[0].onclick = function(){
//发送 AJAX 请求
axios({
//请求类型
method: 'GET',
//URL
url: 'http://localhost:3000/posts/2',
}).then(response => {
console.log(response);
});
}
//添加一篇新的文章
btns[1].onclick = function(){
//发送 AJAX 请求
axios({
//请求类型
method: 'POST',
//URL
url: 'http://localhost:3000/posts',
//设置请求体
data: {
title: "今天天气不错, 还挺风和日丽的",
author: "张三"
}
}).then(response => {
console.log(response);
});
}
//更新数据
btns[2].onclick = function(){
//发送 AJAX 请求
axios({
//请求类型
method: 'PUT',
//URL
url: 'http://localhost:3000/posts/3',
//设置请求体
data: {
title: "今天天气不错, 还挺风和日丽的",
author: "李四"
}
}).then(response => {
console.log(response);
});
}
//删除数据
btns[3].onclick = function(){
//发送 AJAX 请求
axios({
//请求类型
method: 'delete',
//URL
url: 'http://localhost:3000/posts/3',
}).then(response => {
console.log(response);
});
}
</script>
</body>
</html>4.axios其他方式发送请求
axios
常用语法
axios(config):
通用
/
最本质的发任意类型请求的方式
axios(url[, config]):
可以只指定
url
发
get
请求
axios.request(config):
等同于
axios(config)
axios.get(url[, config]):
发
get
请求
axios.delete(url[, config]):
发
delete
请求
axios.post(url[, data, config]):
发
post
请求
axios.put(url[, data, config]):
发
put
请求
axios.defaults.xxx:
请求的默认全局配置
axios.interceptors.request.use():
添加请求拦截器
axios.interceptors.response.use():
添加响应拦截器
axios.create([config]):
创建一个新的
axios(
它没有下面的功能
)
axios.Cancel():
用于创建取消请求的错误对象
axios.CancelToken():
用于创建取消请求的
token
对象
axios.isCancel():
是否是一个取消请求的错误
axios.all(promises):
用于批量执行多个异步请求
axios.spread():
用来指定接收所有成功数据的回调函数的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios其他使用</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">其他使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//发送 GET 请求
btns[0].onclick = function(){
// axios()
axios.request({
method:'GET',
url: 'http://localhost:3000/comments'
}).then(response => {
console.log(response);
})
}
//发送 POST 请求
btns[1].onclick = function(){
// axios()
axios.post(
'http://localhost:3000/comments',
{
"body": "喜大普奔",
"postId": 2
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>5.axios请求响应结果的结构
config：配置对象，里面包含请求类型、请求URL、请求体等
data：响应体的结果
headers：响应头信息
request：原生的Ajax请求对象
status：响应状态码
statusText：响应状态字符串
6.axios配置对象详细说明
这些是用于发出请求的可用配置选项。只有url是必需的。GET如果method未指定，请求将默认为。
{
// `url` 是将用于请求url的服务器
URL : '/user' ,
// `method` 是发出请求时要使用的请求方法
method : 'get' , // 默认
// `baseURL` 将被添加到 `url` 之前，除非 `url` 是绝对的。
// 为 axios 实例设置 `baseURL` 以将相对 URL
// 传递给该实例的方法会很方便。
baseURL : 'https://some-domain.com/api/' ,
// `transformRequest` 允许在将请求数据发送到服务器之前对其进行更改
// 这仅适用于请求方法 'PUT'、'POST'、'PATCH' 和 'DELETE'
// 数组中的最后一个函数必须返回字符串或 Buffer、ArrayBuffer 的实例，
// FormData 或 Stream
// 您可以修改 headers 对象。
transformRequest : [ function ( data , headers ) {
// 做任何你想做的转换数据
return data;
} ] ,
// `transformResponse` 允许在将响应数据传递给 then/catch之前更改响应数据
transformResponse : [ function ( data ) {
// 做任何你想做的事情来转换数据
return data;
} ] ,
// `headers` 是要发送的自定义头
headers : { 'X-Requested-With' : 'XMLHttpRequest' } ,
// `params` 是与请求一起发送的 URL 参数
// 必须是普通对象或 URLSearchParams 对象
params : {
ID : 12345
} ,
// `paramsSerializer` 是一个可选函数，负责序列化 `params`
// (eg https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是要作为请求体发送的数据
// 仅适用于请求方法 'PUT'、'POST'、'DELETE 和 'PATCH'
// 当没有设置 `transformRequest` 时，必须是以下类型之一：
// - 字符串、普通对象、ArrayBuffer、ArrayBufferView、URLSearchParams
// - 仅限浏览器：FormData、File、Blob
// - 仅限节点：流、缓冲区
data：{
firstName : 'Fred'
} ,
// 将数据发送到正文的替代语法
// 方法 post
// 仅发送值，而不发送键
data：'Country=Brasil&City=Belo Horizonte' ,
// `timeout` 指定请求超时前的毫秒数。
// 如果请求时间超过 `timeout`，请求将被中止。
timeout : 1000 , // 默认为 `0`（无超时）
// `withCredentials` 指示是否应该使用凭据进行跨站点访问控制请求
withCredentials : false , // 默认
// `adapter` 允许自定义处理请求，这使得测试更容易。
// 返回一个承诺并提供一个有效的响应（参见 lib/adapters/README.md）。
adapter: function (config) {
/* ... */
},
// `auth` 表示应该使用 HTTP 基本身份验证，并提供凭据。
// 这将设置一个 `Authorization` 标头，覆盖您使用 `headers` 设置的任何现有的
// `Authorization` 自定义标头。
// 请注意，通过此参数只能配置 HTTP Basic auth。
// 对于 Bearer 令牌等，请改用 `Authorization` 自定义标头。
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服务器将响应的数据类型
// 选项有：'arraybuffer'、'document'、'json'、'text'、'stream'
// 仅限浏览器：'blob'
responseType : 'json' , // 默认
// `responseEncoding` 表示用于解码响应的编码（仅限 Node.js）
// 注意：忽略 `responseType` 的 'stream' 或客户端请求
responseEncoding : 'utf8' , // 默认
// `xsrfCookieName` 是用作 xsrf 令牌值的 cookie 的名称
xsrfCookieName : 'XSRF-TOKEN' , // 默认
// `xsrfHeaderName` 是带有 xsrf 令牌值的 http 头的名称
xsrfHeaderName : 'X-XSRF-TOKEN' , // 默认
// `onUploadProgress` 允许处理上传的进度事件
// 仅浏览器
onUploadProgress : function ( progressEvent ) {
// 对本地进度事件做任何你想做的事情
} ,
// `onDownloadProgress` 允许处理下载的进度事件
// 仅浏览器
onDownloadProgress : function ( progressEvent ) {
// 对本地进度事件做任何你想做的事情
} ,
// `maxContentLength` 定义了 node.js 中允许的 http 响应内容的最大大小
maxContentLength : 2000 ,
// `maxBodyLength`（仅限节点选项）定义允许的 http 请求内容的最大大小（以字节为单位）
maxBodyLength : 2000 ,
// `validateStatus` 定
最低0.47元/天 解锁文章
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
