axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios
2020/3/16 11:01:37
本文主要是介绍axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用
XMLHttpRequest
(XHR)对象可以与服务器交互。您可以从URL获取数据,而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中,XMLHttpRequest
被大量使用。
1. 理解XHR
区别一般http请求与ajax请求
- ajax请求是一种特别的http请求
- 对服务器端来说,没有任何区别,区别在浏览器端
- 浏览器端发请求:只有XHR或fetch发出的才是ajax请求,其他的所有请求都是非ajax请求
- 浏览器端接收到响应
- (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调 函数并传入响应相关数
3. API
- XMLHttpRequest():创建XHR对象的构造函数
- status: 响应状态码值,比如200,404
- statusText: 响应状态文本
- readyState: 标识请求状态的只读属性
0: 初始
1: open()之后
2: send()之后
3: 请求中
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)) } } }) } 复制代码
如想了解更多请扫描二维码,关注公众号
![qrcode_for_gh_4d3763fa9780_258 (1).jpg](/upload/202003/16/202003161101375168.png)
这篇关于axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-14system bios shadowed
- 2024-03-14gabios
- 2024-02-07iOS应用提交上架的最新流程
- 2024-02-06打包 iOS 的 IPA 文件
- 2023-12-07uniapp打包iOS应用并通过审核:代码混淆的终极解决方案 ?
- 2023-11-25uniapp IOS从打包到上架流程(详细简单) 原创
- 2023-11-10【iOS开发】iOS App的加固保护原理:使用ipaguard混淆加固
- 2023-09-30最强大的iOS应用源码保护工具:Ipa Guard,保护你的商业机密代码
- 2023-09-07iOS安全加固探讨:代码混淆、类名方法名混淆等方法
- 2023-09-05iOS代码加固与保护方法详解 - 提升iOS应用安全性的关键步骤