axios--源码剖析
源码目录结构https://i-blog.csdnimg.cn/blog_migrate/72f92a9a25365534dc6dc89cbb4e7f32.png#pic_center
源码分析
axios与Axios的关系?
[*]从语法上来说: axios不是Axios的实例
[*]从功能上来说: axios是Axios的实例
[*]axios是Axios.prototype.request函数bind()返回的函数
[*]axios作为对象有Axios原型对象上的全部方法, 有Axios对象上全部属性
instance与axios的区别?
[*]雷同:
(1) 都是一个能发恣意哀求的函数: request(config)
(2) 都有发特定哀求的各种方法: get()/post()/put()/delete()
(3) 都有默认配置和拦截器的属性: defaults/interceptors
[*]差异:
(1) 默认配置很大概不一样
(2) instance没有axios背面添加的一些方法: create()/CancelToken()/all()
axios运行的团体流程?
https://i-blog.csdnimg.cn/blog_migrate/67e84a371e8ac0d6ee6c4dd39315fec7.png#pic_center
[*]团体流程:
request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)
[*]request(config):
将哀求拦截器 / dispatchRequest() / 响应拦截器 通过promise链勾通起来, 返回promise
[*]dispatchRequest(config):
转换哀求数据 ===> 调用xhrAdapter()发哀求 ===> 哀求返回后转换响应数据. 返回promise
[*]xhrAdapter(config):
创建XHR对象, 根据config举行相应设置, 发送特定哀求, 并接收响应数据, 返回promise
axios的哀求/响应拦截器是什么?
https://i-blog.csdnimg.cn/blog_migrate/c0caccdba752c4acf6b7f8175e4cd2bb.png#pic_center
[*] 哀求拦截器:
在真正发送哀求前执行的回调函数
可以对哀求举行检查或配置举行特定处置处罚
乐成的回调函数, 传递的默认是config(也必须是)
失败的回调函数, 传递的默认是error
[*] 响应拦截器
在哀求得到响应后执行的回调函数
可以对响应数据举行特定处置处罚
乐成的回调函数, 传递的默认是response
失败的回调函数, 传递的默认是error
axios的哀求/响应数据转换器是什么?
[*]哀求转换器: 对哀求头和哀求体数据举行特定处置处罚的函数
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
[*]响应转换器: 将响应体json字符串剖析为js对象或数组的函数
response.data = JSON.parse(response.data)
response的团体结构
{
data,
status,
statusText,
headers,
config,
request
}
error的团体结构
{
message,
response,
request,
}
怎样取消未完成的哀求?
[*]当配置了cancelToken对象时, 生存cancel函数
(1) 创建一个用于将来中断哀求的cancelPromise
(2) 并定义了一个用于取消哀求的cancel函数
(3) 将cancel函数传递出来
[*]调用cancel()取消哀求
(1) 执行cacel函数, 传入错误信息message
(2) 内部会让cancelPromise变为乐成, 且乐成的值为一个Cancel对象
(3) 在cancelPromise的乐成回调中中断哀求, 并让发哀求的proimse失败, 失败的reason为Cancel对象
Axios二次封装
功能点
[*]统一举行哀求配置: 基础路径/超时时间等
[*]哀求过程中loading提示
[*]哀求大概需要携带token数据
[*]哀求乐成的value不再是response, 而是response.data
[*]哀求失败/出错统一举行处置处罚, 每个哀求可以不用单独处置处罚
编码实现与测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Axios二次封装</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css">
</head>
<body>
<div>
<button onclick="getUsers()">获取用户列表</button>
<button onclick="getRepos()">获取仓库列表</button>
</div>
<!--
测试接口1: https://api.github.com/search/repositories?q=v&sort=stars
测试接口1: https://api.github.com/search/users?q=v
-->
<!--
1). 统一进行请求配置: 基础路径/超时时间等
2). 请求过程中loading提示
3). 请求可能需要携带token数据
4). 请求成功的value不再是response, 而是response.data
5). 请求失败/出错统一进行处理, 每个请求可以不用单独处理
-->
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>
<script>
const instance = axios.create({
baseURL: 'https://api.github.com',
timeout: 15000
})
instance.interceptors.request.use(config => {
NProgress.start()
// 从local中读取前面保存的token数据
const token = localStorage.getItem('token_key') || 'xxxxx'
if (token) {
config.headers['token'] = token// 请求头的名称为后台接口指定
}
return config
})
instance.interceptors.response.use(
response => {
NProgress.done()
return response.data
},
error => {
NProgress.done()
alert('请求出错了', error)
return error
}
)
</script>
<script>
function getUsers () {
instance.get('/search/users', {
params: {
q: 'v'
}
}).then(result => {
console.table(result.items)
})
}
function getRepos () {
instance.get('/search/repositories', {
params: {
q: 'v',
sort: 'stars'
}
}).then(result => {
console.table(result.items)
})
}
</script>
</body>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]