每日 30 秒 ⏱ 简单的 HTTP 工具

陈伟发布于2019-08-26 18:18 / 762人阅读

简介

XMLHttpRequest、HTTP 工具原理、XHR

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, 
})

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

如果您想让更多人看到文章可以点个点赞。

如果您想激励小二可以到 Github 给个 小星星。

如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop

云服务器混合云云服务器开机要开30秒 cdn套餐每日固定流量的那种 http接口测试工具 ps简单工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110173.html

每日 30 秒 ⏱ 投怀送抱

showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 简介 SEO、sitemap、搜索引擎优化、简单教程在暧昧期和暗恋期时心里总是悬挂着： ta 为什么还不和我表白？ ta 是不是对我没感觉？ ta 是不是只是把我当备胎？ ta 是不是对谁都这样？解决问题最简单的方式就是直接问问对方...

kevin 2019-08-23 16:50 评论0 收藏0
每日 30 秒 ⏱ 大家一起被捕吧

showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 简介安全、注入攻击、XSS 13岁女学生被捕：因发布 JavaScript 无限循环代码。这条新闻是来自 2019年3月10日很多同学匆匆一瞥便滑动屏幕去看下一条消息了，并没有去了解这段代码是什么，怎么办才能防止这个问题。事情发生后为了抗议日本...

lbool 2019-08-23 16:11 评论0 收藏0
每日 30 秒 ⏱ CSV 表格数据转换 JSON 对象

简介数组、CSV、表格、工具 showImg(https://segmentfault.com/img/bVbp3L5?w=900&h=500); 我们之前的两期数组转 CSV 表格数据和 JSON 对象数组转换 CSV 表格数据中学习了转化为 CSV 表格数据的代码片段，今天就讲讲如何把 CSV 表格数据转换为 JSON 对象： // 该源码来自于 https://30secondso...

livem 2019-08-26 18:18 评论0 收藏0
每日 30 秒 ⏱ 数组转CSV表格数据

showImg(https://segmentfault.com/img/remote/1460000018771004?w=900&h=500); 简介数组、CSV、表格、工具将一个数组转化为逗号为分割符的字符串（CSV）即表格数据。 // 该源码来自于 https://30secondsofcode.org const arrayToCSV = (arr, delimiter = ,) =...

nanchen2251 2019-08-23 15:38 评论0 收藏0
每日 30 秒 ⏱ 漫游器法则

showImg(https://segmentfault.com/img/remote/1460000018825131); 简介 SEO、robot.txt、搜索引擎优化在浩海的互联网世界中：互联网宛如宇宙站点宛如星系网页宛如星球网页内容宛如生灵万物而在互联网世界漫游的搜索引擎爬虫小蜘蛛，就好比一搜穿梭在宇宙里的星际漫游器，想想是不是还挺浪漫的。对于不同的星系有着...

Render 2019-08-23 16:51 评论0 收藏0