react使用jsonp跨域

最新推荐文章于 2023-12-08 14:47:13 发布

banzhuanren1

最新推荐文章于 2023-12-08 14:47:13 发布

阅读量3.1k

点赞数

分类专栏： react 文章标签： react react jsonp

本文链接：https://blog.youkuaiyun.com/banzhuanren1/article/details/102463949

版权

react 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何通过JSONP解决跨域问题，实现从QQ音乐API获取数据，并在React应用中展示轮播图。文章详细讲解了JSONP的封装及参数设置，展示了如何在组件中调用API并处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上一篇，因为使用proxy 方法请求QQ音乐返回的是jsonp格式的数据，想使用的话还要进行截取，所以干脆就直接使用jsonp来进行跨域了，数据可以直接使用也省的在麻烦了。上代码
目录结构
在这里插入图片描述
src/common/jsonp.js

import originJsonp from 'jsonp'
export default function jsonp(url,data,option){
	url+=(url.indexOf("?")<0?"?":"&")+strParam(data);
	return new Promise((resolve,reject)=>{
		originJsonp(url,option,(err,data)=>{
			if(!err){
				resolve(data)
			}else{
				reject(err)
			}
		})
	})
}

export function strParam(data){
	let url= '';
	for (var k in data){
		let value =data[k]!==undefined?data[k]:"";
		url+='&'+k+"="+encodeURIComponent(value);
	}
	return url?url.substring(1):""
}

src/api/api.js

export const commonParams={
    g_tk: 1928093487,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    format: 'jsonp'
  }
  
  export const options={
      param:'jsonpCallback'
  }
  
  export const ERROK=0;

src/api/slider.js

import {commonParams,options} from "./api.js"
import jsonp from "../common/jsonp.js"
export  function getSlider() {
    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)
  }

react组件
components/Slider/index.js

import React, { Component } from 'react';
import { Carousel } from 'antd';
import { getSlider } from "../../api/slider";
import './index.less';
class Slider extends Component{
    constructor(props) {
        super(props);
        this.state = {
            isLoading:true
        }
      }
    componentDidMount() {
        this._getSliderList();
    }
    _getSliderList = ()=>{
        getSlider().then((res)=>{
            console.log(res)// 打印输出
            this.setState({
                sliderList:res.data.slider,
                isLoading:false
            })
        })
    }
    render(){
        const sliderList = this.state.sliderList;
        return(
            <div>
                  <Carousel autoplay>
                    {
                        this.state.isLoading
                        ?<div>加载中</div>
                        :sliderList.map((item, index) => {
                            return <a href={item.linkUrl}  key={item.id} ><img src={item.picUrl} alt={item.id}/></a>
                        })
                    }
                    </Carousel>
            </div>
        )
    }
}
export default Slider;

上效果
在这里插入图片描述