vue中使用jsonp进行跨域请求接口

前言：

这里我们使用的是第三方插件jsonp。
github网址：https://github.com/webmodules/jsonp

1、安装

npm install jsonp -S

2、引入

一般新建一个js文件来引入原始jsonp插件，然后对原始插件进行封装，对跨域接口参数的拼接，封装好这个jsonp文件后export出去，之后在哪里用到就再在那里import。
1.新建jsonp.js文件来封装原始jsonp插件

// 引入原始jsonp插件
import originJsonp from 'jsonp'
/*
  封装原jsonp插件，返回promise对象
  url： 请求地址
  data：请求的json参数
  option：其他json参数，默认直接写空对象即可
*/
export default function jsonp (url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
  // originJsonp中的参数说明可以到前言中的github中查看
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}
/*
  封装url参数的拼接
 */
function param (data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    // 防止参数为中文时出现乱码，把字符串作为 URI 组件进行编码
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

3、使用

可以在专门请求接口的js文件夹中新建一个getCurrentCity.js文件来跨域获取接口数据。

// 引入封装好的jsonp
import jsonp from 'common/js/jsonp.js'
// 假设这里为跨域请求当前城市的接口
export function getCurrentCity () {
  // 接口地址
  let url = 'https://api.map.baidu.com'
  // 所需参数
  let datas = {
    'qt': 'dec',
    'ie': 'utf-8',
    'oue': 1,
    'fromproduct': 'jsapi',
    'res': 'api',
    'ak': 'QWilijLzYd6pCmTrHilAeWjbG41zMiXc'
  }
  return jsonp(url, datas, {})
}

4、最后在vue组件中取到接口数据

import {getCurrentCity} from 'common/apis/getCurrentCity.js'

export default {
	methods:{
	  _getCurrentCity () {
	  	  // 在这里就可以获取到当前城市的接口数据了
	      getCityCurrent().then((res) => {
	        // 打印出获取到的数据
	        console.log(res)
	      }).catch((err) => {
	        console.log(err)
	      })
    	}
	},
	mounted () {
    	this._getCurrentCity()
  }
}