react使用jsonp跨域

接上一篇,因为使用proxy 方法请求QQ音乐返回的是jsonp格式的数据,想使用的话还要进行截取,所以干脆就直接使用jsonp来进行跨域了,数据可以直接使用也省的在麻烦了。上代码
目录结构
react使用jsonp跨域_第1张图片
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(
            
{ this.state.isLoading ?
加载中
:sliderList.map((item, index) => { return {item.id}/ }) }
) } } export default Slider;

上效果
react使用jsonp跨域_第2张图片
react使用jsonp跨域_第3张图片

你可能感兴趣的:(react)