React通过jsonp来请求接口获取数据渲染数据

王小婷

发布于 2019-11-10 16:02:12

2.7K0

发布于 2019-11-10 16:02:12

文章被收录于专栏：编程微刊编程微刊

准备工作

Fetch-jsonp https://github.com/camsong/fetch-jsonp

打开万能的工具包：https://www.npmjs.com 搜索fetch-jsonp

1：安装fetch-jsonp

文档上是这样写：

npm install fetch-jsonp

实际好用的命令：

cnpm install fetch-jsonp --save

2：引入

import fetchJsonp from 'fetch-jsonp';

3：看文档的示例

文档链接：https://www.npmjs.com/package/fetch-jsonp

FetchJsonp.js代码（参考代码）

import React from 'react';
import fetchJsonp from 'fetch-jsonp';
class FetchJsonp extends React.Component {
  //构造函数
  constructor() {
    super();
    //react定义数据
    this.state = {
      list: []
    }
  }

  //请求接口的方法
  getData = () => {
    var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';

    fetchJsonp(api)
      .then(function (response) {
        return response.json()
      }).then((json) => {
        console.log(json);
        //用到this需要注意指向，箭头函数
        this.setState({
          list: json.result
        })
      }).catch(function (ex) {
      })
  }
  render() {
    return (
      <div>
        <h2>FetchJsonp获取数据</h2>
        <button onClick={this.getData}>获取api接口</button>
        <ul>
          {
            this.state.list.map((value, key) => {
              return <li key={key}>{value.title}</li>
            })
          }
        </ul>
      </div>
    )
  }
}
export default FetchJsonp;