日常學習（三）—二次封裝jsonp

• jsonp
• Object.assign()
• encodeURIComponent
• promise
• 例項—二次封裝jsonp（vue）

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的伺服器溝通，而 HTML 的<script> 元素是一個例外。利用<script>元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。 簡單來說就是，前端動態生成<script>

標籤插入html中，標籤中的src屬性中含有與後端約定的引數，後端拿到該引數後，以此作為響應函式的函式名，並且將前端需要的內容作為該函式的引數進行返回。

2.Object.assign()

物件拼接

3.encodeURIComponent

將文字字串編碼為一個有效的統一資源識別符號 (URI)

3.Promise

Promise 意識是承諾，是對一個關聯請求任務的承諾，對於不同的請求狀態，執行不同的操作。Promise是一個建構函式，該建構函式含有兩個引數，這兩個引數都是函式，分別是resolve和reject，對應的請求狀態為：fullfilled、rejected。Promise 物件中含有then方法，then方法含有兩個引數，一個接受resolve狀態，一個接受reject狀態，

 //封裝jsonp,使其返回一個promise,
import OriginJsonp from 'jsonp'

//對外暴露封裝的jsonp 方法
export default function jsonp( url,data,option){
    url += (url.indexOf('?')<0?'?':'&') + param(data);
    return new Promise((resolve,reject)=>{
        OriginJsonp(url,option,(err,data)=>{
            if(!err){
                resolve(data);
            }else
 
{
                reject(err);
            }
        })
    })
}


//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) : '' 
}

呼叫：

        methods:{
            _getRecommands(){
                getRecommands().then((res)=>{
                    if(res.code === ERR_OK){
                        console.log(res.data);
                    }
                });
            }
        }
        //res為OriginJsonp中resolve（data）傳來的data或是reject（err）傳來的err,根據請求狀態決定。