当前位置:网站首页>axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios
axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios
2020-11-06 20:42:40 【叫我詹躲躲】
使用
XMLHttpRequest
(XHR)对象可以与服务器交互。您可以从URL获取数据,而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中,XMLHttpRequest
被大量使用。
1. 理解XHR
- 使用XMLHttpRequest(XHR)对象可以与服务器交互,也就是发送ajax请求
- 前端可以获取到数据,而无需让整个页面刷新
- 这使得Web页面可以只更新页面的局部,而不影响用户的操作
区别一般http请求与ajax请求
- ajax请求是一种特别的http请求
- 对服务器端来说,没有任何区别,区别在浏览器端
- 浏览器端发请求:只有XHR或fetch发出的才是ajax请求,其他的所有请求都是非ajax请求
- 浏览器端接收到响应
- (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调 函数并传入响应相关数
3. API
-
XMLHttpRequest():创建XHR对象的构造函数
-
status: 响应状态码值,比如200,404
-
statusText: 响应状态文本
-
readyState: 标识请求状态的只读属性
0: 初始<br /> 1: open()之后<br /> 2: send()之后<br /> 3: 请求中<br /> 4: 请求完成
-
onreadystatechange: 绑定readyState改变监听
-
responseType: 指定相应数据,如果是’json’,得到响应后自动解析响应体数据
-
response: 响应体数据,类型取决于responseType的指定
-
timeout: 指定请求超时时间,默认为0代表没限制
-
ontimeout: 绑定超时的监听
-
onerror: 绑定请求网络错误的监听
-
open(): 初始化一个请求, 参数为: (method, url[, async])
-
send(data): 发送请求
-
abort(): 中断请求
-
getResponseHeader(name): 获取指定名称的响应头值
-
getAllResponseHeaders(): 获取所有响应头组成的字符串
16. setRequestHeader(name, value): 设置请求头
4. XHR的ajax封装,也算是简单版的axios
4.1 特点
- 函数的返回值promise,成功的结果为response,异常的结果为error
- 能处理多种类型的请求:GET/POST/PUT/DELETE
- 函数的参数为一个配置对象
{
url: '', // 请求地址
method: '', // 请求方式 GET/POST/PUT/DELETE
params: {
}, // GET/DELETE 请求的 query 参数
data: {
}, // POST 或 DELETE 请求的请求体参数
}
- 响应json数据自动解析为js的对象/数组
4.2 简单版的axios源码
function axios({
url,
method='GET',
params={
},
data={
}
}) {
// 返回一个promise对象
return new Promise((resolve, reject) => {
// 处理method(转大写)
method = method.toUpperCase()
// 处理query参数(拼接到url上) id=1&xxx=abc
/* { id: 1, xxx: 'abc' } */
let queryString = ''
Object.keys(params).forEach(key => {
queryString += `${ key}=${ params[key]}&`
})
if (queryString) {
// id=1&xxx=abc&
// 去除最后的&
queryString = queryString.substring(0, queryString.length-1)
// 接到url
url += '?' + queryString
}
// 1. 执行异步ajax请求
// 创建xhr对象
const request = new XMLHttpRequest()
// 打开连接(初始化请求, 没有请求)
request.open(method, url, true)
// 发送请求
if (method==='GET' || method==='DELETE') {
request.send()
} else if (method==='POST' || method==='PUT'){
request.setRequestHeader('Content-Type', 'application/json;charset=utf-8') // 告诉服务器请求体的格式是json
request.send(JSON.stringify(data)) // 发送json格式请求体参数
}
// 绑定状态改变的监听
request.onreadystatechange = function () {
// 如果请求没有完成, 直接结束
if (request.readyState!==4) {
return
}
// 如果响应状态码在[200, 300)之间代表成功, 否则失败
const {
status, statusText} = request
// 2.1. 如果请求成功了, 调用resolve()
if (status>=200 && status<=299) {
// 准备结果数据对象response
const response = {
data: JSON.parse(request.response),
status,
statusText
}
resolve(response)
} else {
// 2.2. 如果请求失败了, 调用reject()
reject(new Error('request error status is ' + status))
}
}
})
}
版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558937
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World