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

資訊專欄INFORMATION COLUMN

jsonp的原理介紹及Promise封裝

ninefive / 1784人閱讀

摘要：什么叫是填充式或參數(shù)式的簡寫，是通過請求跨域接口，獲取數(shù)據(jù)的新實現(xiàn)方式的實現(xiàn)原理動態(tài)創(chuàng)建標(biāo)簽，因為標(biāo)簽是沒有同源策略限制，可以跨域的。具體看接下來的實現(xiàn)這個是庫的具體實現(xiàn)，建議下載來研究一下，最好自己動手寫一遍。

什么叫jsonp?

jsonp是json with padding（填充式j(luò)son或參數(shù)式j(luò)son）的簡寫，是通過ajax請求跨域接口，獲取數(shù)據(jù)的新實現(xiàn)方式

jsonp的實現(xiàn)原理：

動態(tài)創(chuàng)建script標(biāo)簽，因為script標(biāo)簽是沒有同源策略限制，可以跨域的。 把script標(biāo)簽的src指向正式服務(wù)端地址，這個地址跟個參數(shù)callback=xxx, 服務(wù)端在返回數(shù)據(jù)時，在xxx里包裹一個方法（里面是返回的數(shù)據(jù)），相當(dāng)于在前端執(zhí)行xxx這個方法，但是瀏覽器并沒有這個方法，所以在發(fā)送請求之前在window注冊這個方法，這樣的話相當(dāng)于在前端執(zhí)行window.xxx()這個方法去獲取數(shù)據(jù)。 具體看接下來的實現(xiàn)！

https://github.com/webmodules...
這個是jsonp庫的具體實現(xiàn)，建議下載來研究一下，最好自己動手寫一遍。本文主要是Promise封裝，所以就不具體介紹jsonp的具體實現(xiàn)

步驟一：

首先安裝這個庫，因為我是在node npm環(huán)境下開發(fā)，所以

$ npm install jsonp

參數(shù)介紹
jsonp(url, opts, fn)
url (String) 服務(wù)器端數(shù)據(jù)接口地址
opts (Object) 一般只需關(guān)注param即可

param (String) 默認(rèn)是callback,這是與后端約定的參數(shù)名稱，也可以隨便定義，只要前后端統(tǒng)一

timeout (Number) 請求超時時間，默認(rèn)是6000ms

prefix (String) callback值的前綴，默認(rèn)是__jp

name (String) 指定全局注冊的回調(diào)方法名，一般不會用到，因為默認(rèn)是prefix+自增數(shù)字

fn 回調(diào)方法，用es6 Promise

步驟二：

下面是具體用法：
建一個名叫jsonp.js的文件
先引入jsonp庫文件

import originJSONP from "jsonp"

對外暴露方法 url:請求服務(wù)器地址，data:參數(shù)

export default function jsonp(url,data,option) {
    url += (url.indexOf("?")<0?"?":"&")+param(data)
    return new Promise(function(resolve,reject) {
        originJSONP(url,option, function(err,data) {
            if(!err){
                resolve(data)
            }else{
                reject(err)
            }
        })
    })
}

定義一個將Object的參數(shù)處理成為 url掛載參數(shù)的形式 的函數(shù)

export function param(data) {
  let url = ""
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ""
    url += "&" + k + "=" + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ""
}

到這里 這個Promise 就封裝好了，接下來就具體調(diào)用來獲取數(shù)據(jù)

步驟三：

建一個js文件，名字自己定義
引入前面封裝的jsonp.js

import jsonp from "../common/js/jsonp.js"

定義參數(shù)

const commonParams = {
    g_tk:1319877694,
    inCharset:"utf-8",
    outCharset:"utf-8",
    notice:0,
    format:"jsonp"
};

定義前后端統(tǒng)一參數(shù)

const options = {
    param:"jsonpCallback"
};

定義獲取數(shù)據(jù)函數(shù) 這里我是拿QQ音樂的數(shù)據(jù)https://m.y.qq.com/（感謝QQ音樂的接口支持）

export function getDataFunc() { 
    const url = "https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg"
    const data = Object.assign({},commonParams,{
        platform:"h5",
        uin:0,
        needNewCode:1,
    })
    return jsonp(url,data,options)
}

到此，咱們就完成用jsonp庫進(jìn)行Promise封裝，并獲取數(shù)據(jù)的過程！ 感謝閱讀！

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

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

相關(guān)文章

  • 如何構(gòu)建通用 api 中間層

    摘要：是在收到響應(yīng)后執(zhí)行的函數(shù)，可以不用返回。一步步介紹了如何構(gòu)建以及使用中間層，來統(tǒng)一管理接口地址，最后還介紹了下中間件等高級功能。 零、問題的由來 開門見山地說，這篇文章是一篇安利軟文~，安利的對象就是最近搞的 tua-api。 顧名思義，這就是一款輔助獲取接口數(shù)據(jù)的工具。 發(fā)請求相關(guān)的工具辣么多，那我為啥要用你呢？ 理想狀態(tài)下，項目中應(yīng)該有一個 api 中間層。各種接口在這里定義，業(yè)務(wù)...

    BingqiChen 評論0 收藏0

  • ES6(一) —— 異步編程解決辦法[從回調(diào)函數(shù)到promise,generator,async]

    摘要：回調(diào)函數(shù)這是最原始的一種異步解決方法。從的對象演化而來對象是提出的一種對異步編程的解決方案，但它不是新的語法，而是一種新的寫法，允許將回調(diào)函數(shù)的嵌套改成鏈?zhǔn)秸{(diào)用。 一、前言 異步編程對JavaScript來說非常重要，因為JavaScript的語言環(huán)境是單線程的，如果沒有異步編程將變得非?？膳?，估計根本無法使用。這篇文章就來總結(jié)一下從最原始的回調(diào)函數(shù)到現(xiàn)在的ES6、ES7的新方法。 文...

    greatwhole 評論0 收藏0

  • axios 封裝和使用

    摘要：當(dāng)然不限于此種寫法，還有其他的寫法可網(wǎng)上搜索封裝參考執(zhí)行異步請求發(fā)請求配置對象指定請求參數(shù)發(fā)請求如果成功了調(diào)用如果失敗了不調(diào)用而是提示異常信息請求出錯了要求能根據(jù)接口文檔定義接口請求包含應(yīng)用中所有接口請求函數(shù)的模塊每個函數(shù)的返回值都是基本要 當(dāng)然不限于此種寫法，還有其他的寫法可網(wǎng)上搜索axios封裝參考//api/axios.js import axios from axiosimpo...

    Airmusic 評論0 收藏0

  • axios封裝，組件獲取數(shù)據(jù)

    摘要：當(dāng)然不限于此種寫法，還有其他的寫法可網(wǎng)上搜索封裝參考執(zhí)行異步請求發(fā)請求配置對象指定請求參數(shù)發(fā)請求如果成功了調(diào)用如果失敗了不調(diào)用而是提示異常信息請求出錯了要求能根據(jù)接口文檔定義接口請求包含應(yīng)用中所有接口請求函數(shù)的模塊每個函數(shù)的返回值都是基本要 當(dāng)然不限于此種寫法，還有其他的寫法可網(wǎng)上搜索axios封裝參考//api/axios.js import axios from axiosimpo...

    djfml 評論0 收藏0

  • fetch使用的常見問題及其解決辦法

    首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考MDN fetch教程。 引言 說道fetch就不得不提XMLHttpRequest了，XHR在發(fā)送web請求時需要開發(fā)者配置相關(guān)請求信息和成功后的回調(diào)，盡管開發(fā)者只關(guān)心請求成功后的業(yè)務(wù)處理，但是也要配置其他繁瑣內(nèi)容，導(dǎo)致配置和調(diào)用比較混亂，也不符合關(guān)注分離的原則；fetch的出現(xiàn)正是為了解決XHR存在的這些問題。例如下面代碼： f...

    pubdreamcc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<