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

資訊專欄INFORMATION COLUMN

jsonpGet, 跨域如此簡單

BoYang / 3283人閱讀

摘要：源碼我們經(jīng)常在項(xiàng)目中遇到跨域問題，比如有時(shí)候在做個(gè)人項(xiàng)目的時(shí)候，我們需要請(qǐng)求第三方的一些數(shù)據(jù)，比如請(qǐng)求豆瓣公開的數(shù)據(jù)，或則音樂開放的數(shù)據(jù)等等。但是毫無疑問，在我們的應(yīng)用中直接請(qǐng)求這些將出現(xiàn)跨域問題。比如，向豆瓣公開發(fā)送請(qǐng)求。

jsonGet源碼

我們經(jīng)常在項(xiàng)目中遇到跨域問題，比如有時(shí)候在做個(gè)人項(xiàng)目的時(shí)候，我們需要請(qǐng)求第三方的一些數(shù)據(jù)，比如請(qǐng)求豆瓣公開api的數(shù)據(jù)，或則qq音樂開放api 的數(shù)據(jù)等等。但是毫無疑問，在我們的web應(yīng)用中直接請(qǐng)求這些api將出現(xiàn)跨域問題。所以筆者心血來潮寫了個(gè)插件—— jsonpGet。我們可以通過它來向跨域api發(fā)送get請(qǐng)求。下面直入主題，不多廢話。

jsonpGet

簡單易用的jsonp跨域請(qǐng)求插件，并且它返回一個(gè)promise。

安裝

通過npm進(jìn)行安裝:

$ npm install jsonp-get
用法 jsonpGet(url, params?, callback?)

url (string) 要請(qǐng)求的地址

params (object) 參數(shù)，組成url的參數(shù)部分如：{a: 1, b: 2} 轉(zhuǎn)為 ?a=1&b=2

callback (string) 前后端約定的字段名，默認(rèn)值為callback（通常為此值），用來攜帶回調(diào)。

demo

比如，向豆瓣公開api發(fā)送請(qǐng)求。我們可以在then方法的回調(diào)中處理我們的數(shù)據(jù)，十分方便。

import jsonpGet from "jsonp-get"

let url = "https://api.douban.com/v2/movie/search"
let params = { tag: "喜劇" }

jsonpGet(url, params)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

/* Network
*
* Request URL: https://api.douban.com/v2/movie/search?tag=%E5%96%9C%E5%89%A7&callback=myback
* Request Method: GET
* Status Code: 200 OK
*/

/* Console
*
*  {count: 20, start: 0, total: 200, subjects: Array(20), title: "帶有標(biāo)簽 "喜劇" 的條目"}
*/

Github: jsonGet項(xiàng)目 有什么問題，歡迎提 issues

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

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

相關(guān)文章

  • 同源策略和跨域方法

    摘要：同源策略的控制者是瀏覽器，瀏覽器可以控制不同域之間的資源的訪問或相互操作，但不控制自己對(duì)不同域之間的資源的操作和訪問。 同源與跨域 一般情況下，禁止一個(gè)域從另一個(gè)域讀取數(shù)據(jù)，卻可以使用某些從其他域拿到的資源。比如說，允許一個(gè)域執(zhí)行、渲染、應(yīng)用從其他域獲取到的腳本、圖片、樣式；同樣，一個(gè)域可以展示從其他域獲取的內(nèi)容，比如在frame中顯示html文檔。網(wǎng)絡(luò)資源也可以選擇性的讓其他域來讀取...

    魏憲會(huì) 評(píng)論0 收藏0

  • 再也不學(xué)AJAX了?。ㄈ?em>跨域獲取資源 ③ - WebSocket & postMessag

    摘要：一基于維基百科的定義，是一種在單個(gè)連接上進(jìn)行全雙工通訊的協(xié)議。讓我們看看這個(gè)模型的具體實(shí)現(xiàn)下面是客戶端告知服務(wù)端要升級(jí)為協(xié)議的報(bào)頭下面是服務(wù)端向客戶端返回的響應(yīng)報(bào)頭想知道這些報(bào)頭中的字段中代表什么可以參考維基百科下的說明。 讓我們先簡單回顧一下之前談到的內(nèi)容，AJAX是一種無頁面刷新的獲取服務(wù)器資源的混合技術(shù)。而基于瀏覽器的同源策略，不同域之間不可以發(fā)送AJAX請(qǐng)求。但是在某些情境下，...

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

  • HTML5跨域開發(fā)

    摘要：默認(rèn)情況下，跨域請(qǐng)求發(fā)起時(shí)候不包含，需要我們主動(dòng)將的屬性設(shè)為才行。出現(xiàn)錯(cuò)誤時(shí)，會(huì)返回完整的棧，有利排查。不然如果出現(xiàn)錯(cuò)，響應(yīng)頭不包含這兩個(gè)跨域標(biāo)記，就會(huì)理所當(dāng)然地不顯示返回內(nèi)容，也就無法看到錯(cuò)誤描述，根本無法排查。 首發(fā)我的博客 HTML5中提供了跨域加載數(shù)據(jù)的方法，讓我們得以從JSONP或者Flash中介等各種繞行方案中解脫出來，更加順暢地與服務(wù)器交流。另一方面，因?yàn)镻HP...

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

  • 如何替代即將淘汰的Flash方案？

    摘要：下面介紹第二種方法降子域通信不支持時(shí)降子域通信不支持時(shí)，降子域通信由于和都是屬于下的子域，同源策略在前端頁面中判定依據(jù)是而不是。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由MarsBoy發(fā)表于云+社區(qū)專欄 | 導(dǎo)語 Web技術(shù)飛速發(fā)展的如今，我們?cè)诟惺苄录夹g(shù)帶來的便捷和喜悅的同時(shí)，也時(shí)常在考慮著一個(gè)問題：老技術(shù)如何遷移。正如本文的主題一樣，F(xiàn)lash技術(shù)在早年風(fēng)靡在...

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

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

0條評(píng)論

閱讀需要支付1元查看
<