React实现获取门户信息并将结果生成Excel

获取门户信息

遇到了一个需求，平台管理人员想获取ArcgisOnline上的用户信息，包括邮箱、用户名、角色等。想法是向Rest api提供的url发送请求，获取到信息后以数组的形式存储到state中，最后按照信息字段生成Excel。

1.发送请求

安装Axios，用于发送请求

npm isntall react-axios

然后在Online上通过Network查找请求的url和请求参数，找到所需要的的url和参数后直接就可以开始写了。定义好按钮后onClike事件绑定函数

 <button onClick={this.postitem}>获取信息</button>

postitem=()=>{
const data={
            sortField: 'lastlogin',
            sortOrder: 'desc',
            start:1,
            num:100,
            total: 0,
            nextStart: -1,
            applyFiltersIntersection: 'false',
            excludeSystemUsers: 'true',
            f: 'json',
            token:this.state.tokenmanager
        }
        
        const params = qs.stringify(data);//将对象序列化成URL的形式，以&进行拼接
       Axios.post('https://www.arcgisonline.cn/arcgis/sharing/rest/portals/self/users',params)
       .then(
                (res) => {
                const  users =res.data.users
                })
                }

其中比较重要的参数为：start（请求数量），token（管理员令牌，需要提前获取）
其他的参数按照Online给出的默认数值即可，最后还需要将用户数据存入state中以便提取，要注意获取到的users是数组的形式。

请求完后发现Rest Api限制了请求数量，每次只能请求100条 ，但Online上的用户数目将近15000个，所以需要对请求进行递归。

2.请求递归多次获取数据并存入state中

想法是每次请求结束后回调执行返回函数，并让请求参数start加100，且每次请求完将响应的数据以数组的形式拼接为一个数组，存入state里。
首先需要在组件外定义两个变量，一个用于start赋值，一个用于控制this指向

var count=1;
var mySelf;

对请求进行递归并将数组存入state中

postitrm=()=>{
mySelf = this;

  ...
  
  Axios.post('https://www.arcgisonline.cn/arcgis/sharing/rest/portals/self/users',params)
            .then(
                (res) => {
                //设置定时器控制请求速度
                   setTimeout( ()=>{if(count<15101){
                            const users=res.data.users
                            count = count + 100;
                            console.log('第:'+count%100 + '次请求');
                            //用concat将数组拼接存入state中
                            this.setState({users:this.state.users.concat(users)})
                            //返回函数
                            mySelf.postitem();
                        // return this.postitem(cont+100)
                    }
                    else{
                      return this.state.users
                    }},500)
                    })
                    }

这里使用了concat方法拼接数组，要注意当start数值小于150101返回的是函数，但超过这个值时需要返回state让组件重新render渲染并停止请求。
可以看到state里面users已经正在以0.5秒的速度存入数组了

3.将数据生成Excel

感谢这个作者提供的方法《React ant design表格导出数据为EXCEL表格数据》

首先安装插件js-export-excel

npm install js-export-excel

引入

import exportexcel from "js-export-excel"

接着写好按钮后就可以直接调用了

downexcel=()=>{
        var option={};
        let dataTable = [];
        //将state中的数组遍历把需要的数据存入新数组中
        this.state.users.map((data)=>{
            let obj={
                user: data.username,
                fristname: data.firstName,
                lastname: data.lastName,
                email:data.email,
                role:data.role
            }
            //存入新数组dataTable
            dataTable.push(obj);
        })
        //定义excel
        option.fileName = 'online数据'
        option.datas=[
            {
                sheetData:dataTable,
                sheetName:'sheet',
                sheetHeader:['用户名','名字','姓氏','电子邮件','角色'],//表头
            }
        ];

       //导出Excel
        var toExcel = new exportexcel(option);
        toExcel.saveExcel();
    }

方法其实很简单，定义一个对象一个数组，新数组用于将state中存储的数组按需求提取数据至新数组中，对象则是用于生成excel
最终效果：

4.全部代码

import React, {Component} from 'react';
import Axios from "axios";
import qs from 'qs'
import PubSub from "pubsub-js";
import exportexcel from "js-export-excel"

var count = 1;
var mySelf;

export default class Getuserinfo extends Component {
    state = {
        users: [],
    }
    componentDidMount() {
        PubSub.subscribe('onlinetoken', (msg, tokenmanager) => this.setState(tokenmanager))//订阅Getmanager发布的token
    }
    postitem = () => {
        mySelf = this;
        const data = {
            sortField: 'lastlogin',
            sortOrder: 'desc',
            start: count,
            num: 100,
            total: 0,
            nextStart: -1,
            applyFiltersIntersection: 'false',
            excludeSystemUsers: 'true',
            f: 'json',
            token: this.state.tokenmanager
        }
        const params = qs.stringify(data);
        Axios.post('https://www.arcgisonline.cn/arcgis/sharing/rest/portals/self/users', params)
            /*将获取到的数据提出，存储到state里*/
            .then((res) => {
                    setTimeout(() => {
                        if (count < 15101) {
                            const users = res.data.users
                            count = count + 100;
                            console.log('第:' + count % 100 + '次请求');
                            this.setState({users: this.state.users.concat(users)})
                            mySelf.postitem();
                            // return this.postitem(cont+100)
                        } else {
                        return this.state.users
                        } 
                        }, 500)})}

    downexcel = () => {
        var option = {};
        let dataTable = [];
        this.state.users.map((data) => {
            let obj = {
                user: data.username,
                fristname: data.firstName,
                lastname: data.lastName,
                email: data.email,
                role: data.role
            }
            dataTable.push(obj);
        })
        option.fileName = 'online数据'
        option.datas = [
            {
                sheetData: dataTable,
                sheetName: 'sheet',
                sheetHeader: ['用户名', '名字', '姓氏', '电子邮件', '角色'],
            }
        ];
        var toExcel = new exportexcel(option);
        toExcel.saveExcel();
    }
    render() {
        return (
            <div>
                <button onClick={this.postitem}>获取信息</button>
                <button onClick={this.downexcel}>导出excel</button>
            </div>
        );
    }
}

5.要注意的

1.存入concat拼接一定要是单挑数据，不能是数组，否则拼接完后数据会在数组中的数组下
2.一定要为this设置变量赋值，否则返回函数时会出现指向错误
3.要设置定时器，以免对服务器造成负担，导致服务器崩溃