jsonp原理，封装，应用（vue项目）

jsonp原理

JSON是一种轻量级的数据传输格式。

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

jsonp封装　

import originJSONP from 'jsonp'

export default function jsonp (url, data, option) {
//url接口拼接

  url += (url.indexOf('?') < 0 ? '?' : '&') + prarm(data)

//es6的promise对象

  return new Promise((resolve, reject) => {

    originJSONP(url, option, (err, data) => {

      if (!err) {

        resolve(data)

      } else {

        reject(err)

      }

    })

  })

}

function prarm (data) {

  let url = ''

  for (var k in data) {

    let value = data[k] !== undefined ? data[k] : ''

    url += `&${k}=${encodeURIComponent(value)}`

  }

  return url ? url.substring(1) : ''

}

jsonp应用

export const options = {

  param: 'jsonpCallback'

}

import { commonParams, options } from './config'

　import jsonp from 'common/js/jsonp'

export function getRecommend () {
　　//请求地址

  const url = ''
//请求数据凭借

  const data = Object.assign({}, commonParams, {

    uin: 0

  })

  return jsonp(url, data, options)

}

data () {

    return {

      recommoneds: []

    }

  },

  created () {

    this._getRecommend()

  },

  methods: {

    _getRecommend () {

      getRecommend().then(res => {

        if (res.code === ERR_OK) {

          this.recommoneds = res.data

          console.log(res.data)

        }

      })

    }

  },

很简单的一个跨域拿数据

巴特西

jsonp原理，封装，应用（vue项目）

jsonp原理

jsonp封装

jsonp应用

最新文章

热门文章