<ul id="ua6ey"></ul>

<strike id="ua6ey"></strike>

每日 30 秒 ? 簡單的 HTTP 工具

陳偉發布于2019-08-26 18:18 / 892人閱讀

簡介

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

GPU云服務器云服務器云服務器開機要開30秒 cdn套餐每日固定流量的那種 http接口測試工具 ps簡單工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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