成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 簡(jiǎn)單的 HTTP 工具

陳偉 / 957人閱讀

簡(jiǎn)介 
XMLHttpRequest、HTTP 工具原理、XHR

jQuery.ajax、axios 和 新的 Web API fetch 在瀏覽器不支持的兼容代碼都是利用
XMLHttpRequest 來完成網(wǎng)絡(luò)請(qǐng)求，今天一起來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 HTTP 請(qǐng)求客戶端 順便學(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ù)為接受一個(gè)對(duì)象參數(shù)，而不是像 (url, callback) 這樣的參數(shù)列表？因?yàn)槭褂脤?duì)象相對(duì)參數(shù)列表來說不用刻意的去記參數(shù)的順序只需要記住所需數(shù)據(jù)：

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

創(chuàng)建 XMLHttpRequest 對(duì)象并使用 XMLHttpRequest.open() 方法初始化一個(gè)請(qǐng)求（這里的 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)請(qǐng)求完成時(shí)利用 回調(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);
使用場(chǎng)景

手癢的同學(xué)可以開始動(dòng)手加上 Promise 或者按照 axios API 實(shí)現(xiàn)一個(gè)自己的 HTTP Client，好奇寶寶可以試試閱讀相關(guān) axios、fetch 源碼。下面給出幾個(gè)使用例子：

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, 
})
一起成長(zhǎng) 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

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

本文原稿來自 PushMeTop

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110173.html

相關(guān)文章

  • 每日 30 秒 ? 投懷送抱

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

    kevin 評(píng)論0 收藏0

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

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

    lbool 評(píng)論0 收藏0

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

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

    livem 評(píng)論0 收藏0

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

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

    nanchen2251 評(píng)論0 收藏0

  • 每日 30 秒 ? 漫游器法則

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

    Render 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<