jsonp的原理介紹及Promise封裝

ninefive 發布于2019-08-21 17:43 / 1759人閱讀

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

什么叫jsonp?

jsonp是json with padding（填充式json或參數式json）的簡寫，是通過ajax請求跨域接口，獲取數據的新實現方式

jsonp的實現原理：

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

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

步驟一：

首先安裝這個庫，因為我是在node npm環境下開發，所以

$ npm install jsonp

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

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

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

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

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

fn 回調方法，用es6 Promise

步驟二：

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

import originJSONP from "jsonp"

對外暴露方法 url:請求服務器地址，data:參數

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的參數處理成為 url掛載參數的形式的函數

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 就封裝好了，接下來就具體調用來獲取數據

步驟三：

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

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

定義參數

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

定義前后端統一參數

const options = {
    param:"jsonpCallback"
};

定義獲取數據函數這里我是拿QQ音樂的數據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庫進行Promise封裝，并獲取數據的過程！感謝閱讀！

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89929.html

如何構建通用 api 中間層

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

BingqiChen 2019-08-23 13:00 評論0 收藏0
ES6(一) —— 異步編程解決辦法[從回調函數到promise,generator,async]

摘要：回調函數這是最原始的一種異步解決方法。從的對象演化而來對象是提出的一種對異步編程的解決方案，但它不是新的語法，而是一種新的寫法，允許將回調函數的嵌套改成鏈式調用。一、前言異步編程對JavaScript來說非常重要，因為JavaScript的語言環境是單線程的，如果沒有異步編程將變得非常可怕，估計根本無法使用。這篇文章就來總結一下從最原始的回調函數到現在的ES6、ES7的新方法。文...

greatwhole 2019-08-22 15:19 評論0 收藏0
axios 封裝和使用

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

Airmusic 2019-08-26 10:38 評論0 收藏0
axios封裝，組件獲取數據

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

djfml 2019-08-26 10:38 評論0 收藏0
fetch使用的常見問題及其解決辦法

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

pubdreamcc 2019-08-20 14:34 評論0 收藏0