成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 簡單的 HTTP 工具

陳偉 / 902人閱讀

簡介 
XMLHttpRequest、HTTP 工具原理、XHR

jQuery.ajax、axios 和 新的 Web API fetch 在瀏覽器不支持的兼容代碼都是利用
XMLHttpRequest 來完成網(wǎng)絡(luò)請求，今天一起來實現(xiàn)一個簡單的 HTTP 請求客戶端 順便學(xué)習(xí)XMLHttpRequest 中較為常用的函數(shù)方法：

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);
};
代碼分析

函數(shù)為接受一個對象參數(shù)，而不是像 (url, callback) 這樣的參數(shù)列表？因為使用對象相對參數(shù)列表來說不用刻意的去記參數(shù)的順序只需要記住所需數(shù)據(jù)：

小技巧：根據(jù)情況利用對象參數(shù)來代替參數(shù)列表。
const http = ({
  url,
  callback,
  data=null,
  method="GET",
  err = console.error,
}) => {
    // ...
};

創(chuàng)建 XMLHttpRequest 對象并使用 XMLHttpRequest.open() 方法初始化一個請求（這里的 method 可以是 GET、POST、PUT、DELETE）：

const request = new XMLHttpRequest();
request.open(method, url, true);

設(shè)置 Request Header 中的內(nèi)容類型：

request.setRequestHeader("Content-type", "application/json; charset=utf-8");

當(dāng)請求完成時利用 回調(diào)函數(shù) 來執(zhí)行外部傳入的代碼：

小技巧：善用用回調(diào)函數(shù)。
request.onerror = () => err(request);
request.onload = () => callback(request.responseText);

發(fā)送需要帶上的數(shù)據(jù)：

request.send(data ? JSON.stringify(data) : null);
使用場景

手癢的同學(xué)可以開始動手加上 Promise 或者按照 axios API 實現(xiàn)一個自己的 HTTP Client，好奇寶寶可以試試閱讀相關(guān) 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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110173.html

相關(guān)文章

  • 每日 30 秒 ? 投懷送抱

    showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 簡介 SEO、sitemap、搜索引擎優(yōu)化、簡單教程 在曖昧期和暗戀期時心里總是懸掛著： ta 為什么還不和我表白？ ta 是不是對我沒感覺？ ta 是不是只是把我當(dāng)備胎？ ta 是不是對誰都這樣？ 解決問題最簡單的方式就是直接 問問對方...

    kevin 評論0 收藏0

  • 每日 30 秒 ? 大家一起被捕吧

    showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 簡介 安全、注入攻擊、XSS 13歲女學(xué)生被捕：因發(fā)布 JavaScript 無限循環(huán)代碼。 這條新聞是來自 2019年3月10日 很多同學(xué)匆匆一瞥便滑動屏幕去看下一條消息了，并沒有去了解這段代碼是什么，怎么辦才能防止這個問題。事情發(fā)生后為了抗議日本...

    lbool 評論0 收藏0

  • 每日 30 秒 ? CSV 表格數(shù)據(jù)轉(zhuǎn)換 JSON 對象

    簡介 數(shù)組、CSV、表格、工具 showImg(https://segmentfault.com/img/bVbp3L5?w=900&h=500); 我們之前的兩期 數(shù)組轉(zhuǎn) CSV 表格數(shù)據(jù) 和 JSON 對象數(shù)組轉(zhuǎn)換 CSV 表格數(shù)據(jù) 中學(xué)習(xí)了轉(zhuǎn)化為 CSV 表格數(shù)據(jù)的代碼片段，今天就講講 如何把 CSV 表格數(shù)據(jù)轉(zhuǎn)換為 JSON 對象： // 該源碼來自于 https://30secondso...

    livem 評論0 收藏0

  • 每日 30 秒 ? 數(shù)組轉(zhuǎn)CSV表格數(shù)據(jù)

    showImg(https://segmentfault.com/img/remote/1460000018771004?w=900&h=500); 簡介 數(shù)組、CSV、表格、工具 將一個數(shù)組轉(zhuǎn)化為逗號為分割符的字符串（CSV）即表格數(shù)據(jù)。 // 該源碼來自于 https://30secondsofcode.org const arrayToCSV = (arr, delimiter = ,) =...

    nanchen2251 評論0 收藏0

  • 每日 30 秒 ? 漫游器法則

    showImg(https://segmentfault.com/img/remote/1460000018825131); 簡介 SEO、robot.txt、搜索引擎優(yōu)化 在浩海的互聯(lián)網(wǎng)世界中： 互聯(lián)網(wǎng) 宛如 宇宙 站點 宛如 星系 網(wǎng)頁 宛如 星球 網(wǎng)頁內(nèi)容 宛如 生靈萬物 而在互聯(lián)網(wǎng)世界漫游的搜索引擎爬蟲小蜘蛛，就好比一搜穿梭在宇宙里的星際漫游器，想想是不是還挺浪漫的。對于不同的星系有著...

    Render 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<