每日 30 秒 ⏱ 一个简单的 HTTP 请求客户端

简介一天 30 秒 ⏱ 一段代码 ✍️ 一个场景 ????jQuery.ajax、axios 和 新的 Web API fetch 在浏览器不支持的兼容代码都是利用 XMLHttpRequest 来完成网络请求，今天一起来实现一个简单的 HTTP 请求客户端 顺便学习XMLHttpRequest 中较为常用的函数方法：const http = ({ url, callback, data=null, method=‘GET’, err = console.error,}) => { const request = new XMLHttpRequest(); request.open(method, url, true); request.setRequestHeader(‘Content-type’, ‘application/json; charset=utf-8’); request.onerror = () => err(request); request.onload = () => callback(request.responseText); request.send(data ? JSON.stringify(data) : null);};代码分析函数为接受一个对象参数，而不是像 (url, callback) 这样的参数列表？因为使用对象相对参数列表来说不用刻意的去记参数的顺序只需要记住所需数据：小技巧：根据情况利用对象参数来代替参数列表。const http = ({ url, callback, data=null, method=‘GET’, err = console.error,}) => { // …};创建 XMLHttpRequest 对象并使用 XMLHttpRequest.open() 方法初始化一个请求（这里的 method 可以是 GET、POST、PUT、DELETE）：const request = new XMLHttpRequest();request.open(method, url, true);设置 Request Header 中的内容类型：request.setRequestHeader(‘Content-type’, ‘application/json; charset=utf-8’);当请求完成时利用 回调函数 来执行外部传入的代码：小技巧：善用用回调函数。request.onerror = () => err(request);request.onload = () => callback(request.responseText);发送需要带上的数据：request.send(data ? JSON.stringify(data) : null);使用场景手痒的同学可以开始动手加上 Promise 或者按照 axios API 实现一个自己的 HTTP Client，好奇宝宝可以试试阅读相关 axios、fetch 源码。下面给出几个使用例子：http({ method: ‘POST’, url: ‘http://pushme.top/api/v1/posts', callback: console.log, data: { title: ‘hello’, content: ‘hello world’}})http({ method: ‘GET’, url: ‘http://pushme.top/api/v1/posts', callback: console.log, })打赏&联系如果您感觉有收获，欢迎给我打赏，以激励我输出更多的优质内容。本文原稿来自 PushMeTop