小程序的入口汇总_在vue中使用jsonp进行跨域请求

日期:2021-01-05 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

在vue中使用jsonp进行跨域请求接口操作     投稿:jingxian   这篇文章主要介绍了在vue中使用jsonp进行跨域请求接口操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

这里我们使用的是第三方插件jsonp。

github网址:

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 = '/ 所需参数
 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()

补充知识:Vue中关于axios和jsonp的封装

我就废话不多说了,大家还是直接看代码吧~

import qs from 'qs'
import axios from 'axios' 
 //拦截器
axios.interceptors.request.use(function (config) {
 console.log('正在发送请求哦...')//添加loading效果
 return config;
}, function (error) {
 return Promise.reject(error);
// Add a response interceptor
axios.interceptors.response.use(function (response) {
 console.log('请求成功啦...')
 return response;
}, function (error) {
 return Promise.reject(error);
const ajax={
 post:function(url,data={}){
 return new Promise((resolve,reject)= {
 axios.post(url,qs.stringify(data)).then(function(res){
 resolve(res.data)
 }).catch(function(err){
 reject(err)
 get:function(url,data={}){
 return new Promise((resolve,reject)= {
 axios.get(url,{params:qs.stringify(data)}).then(function(res){
 resolve(res.data)
 }).catch(function(err){
 reject(err)
export default ajax;

在main.js中

import ajax from './common/api/index.js'

Vue.prototype.$post=ajax.post Vue.prototype.$get=ajax.get

jsonp

import originJSONP from 'jsonp'
jsonp(url,option,callbackFn)
{name:1,age:20}
/ 
export default function(url,data,option){
 url+=(url.indexOf(' ') 0 ' ' : ' ' )+param(data);
 return new Promise(function(resolve,reject){
 originJSONP(url,option,function(err,res){
 if(!err){
 resolve(res);
 }else{
 reject(err)
{name='aa',age=20}
 name=aa age=20
function param(data){
 let url='';
 for(let key in data){
 let item =data[key]!==undefined data[key] : '';
 url+=` ${key}=${encodeURIComponent(item)}`
 return url url:'';
 }

以上这篇在vue中使用jsonp进行跨域请求接口操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。