reactjs之如何在react中使用redux取消之前的axios

TianFang 2025年12月25日程序员 74 0

我的操作文件中有以下操作。

import axios from 'axios'; 
import $ from 'jquery'; 
var CancelToken = axios.CancelToken; 
var source = CancelToken.source(); 
 
export const FETCH_WORKERJOBS = 'fetch_workerjobs'; 
 
export function fetchWorkerJobs(page, size, where, sort) { 
    const request = axios.get(`/api/user/report/comms/matrix/upload/format/json?quiet=1&page=`+page+`&size=`+size+`&where=`+JSON.stringify(where)+`&sort=`+sort,{cancelToken: source.token});    
    return { 
        type: FETCH_WORKERJOBS, 
        payload: request 
    }; 
} 
 
export const FETCH_WORKERJOBS_COUNT = 'fetch_workerjobs_count'; 
 
export function fetchWorkerJobsCount(where) { 
    const request = axios.get(`/api/user/report/comms/matrix/upload/count/format/json?quiet=1&where=`+JSON.stringify(where), {cancelToken: source.token});   
    return { 
        type: FETCH_WORKERJOBS_COUNT, 
        payload: request 
    }; 
}

当我将函数导入组件时，如何访问 cancel token 来取消

import _ from 'lodash'; 
import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchWorkerJobs, fetchWorkerJobsCount } from '../../actions'; 
import { Link } from 'react-router-dom'; 
import { bindActionCreators } from 'redux'; 
import { Button, ButtonToolbar, Modal } from 'react-bootstrap'; 
import FontAwesome from 'react-fontawesome'; 
import { 
    BootstrapTable, 
    TableHeaderColumn, 
    InsertModalHeader, 
    InsertModalFooter 
} from 'react-bootstrap-table'; 
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'; 
import $ from 'jquery'; 
 
const jobType = { 
        } 
 
class WorkerJobs extends Component { 
    constructor(props) { 
        super(props); 
        this.workerJobs = []; 
        this.state = { 
            data: [], 
            show: false, 
            showError: false, 
            errorMsg: '', 
            errorTitle: '', 
            record: {}, 
            showEdit: false, 
            confirm: { 
                body: '', 
                show: false, 
                id: '' 
            }, 
            totalDataSize: 0, 
            currentPage: 1 
 
        }; 
        this.where = {}; 
        this.sort = 'worker_job_id desc'; 
        this.meta = { title: 'Report - Worker Jobs', description: 'List of jobs processed' }; 
        this.error = {show: false,msg:''}; 
        this.passMetaBack = this.passMetaBack.bind(this); 
        this.options = { 
            defaultSortName: 'worker_job_id', // default sort column name 
            defaultSortOrder: 'desc', // default sort order 
            page: 1, 
            paginationShowsTotal: true, 
            sizePerPage: 10, 
            sizePerPageList: [10,25,50], 
            onPageChange: this.onPageChange.bind(this), 
            onSizePerPageList: this.onSizePerPageList.bind(this), 
            onFilterChange: this.onFilterChange.bind(this), 
            onSortChange: this.onSortChange.bind(this) 
        }; 
 
        this.fetchWorkerJobs = this.fetchWorkerJobs.bind(this); 
 
        this.runOnce = false; 
    } 
 
    onPageChange(page, sizePerPage) { 
        const currentIndex = (page - 1) * sizePerPage; 
        this.options.page = page; 
        console.log(this.props); 
        this.props.fetchWorkerJobsCount.cancel(); //not working 
        this.props.fetchWorkerJobs.cancel(); //not working 
        console.log(this.props); 
        this.fetchWorkerJobs(page, sizePerPage, this.where, this.sort); 
      } 
 
    onSizePerPageList(sizePerPage) { 
        const currentIndex = (this.state.currentPage - 1) * sizePerPage; 
        this.options.sizePerPage = sizePerPage; 
        this.fetchWorkerJobs(this.options.page, sizePerPage, this.where, this.sort); 
      } 
 
    onFilterChange(filterObj) { 
 
        let where = {}; 
        for (const key in filterObj) { 
            where[key] = filterObj[key].value; 
        } 
        this.where = where; 
        this.fetchWorkerJobs(this.options.page,this.options.sizePerPage,this.where, this.sort); 
      } 
 
    onSortChange(sortName, sortOrder) { 
        this.sort = sortName + " " + sortOrder; 
        this.fetchWorkerJobs(this.options.page,this.options.sizePerPage,this.where, this.sort); 
      } 
 
 
 
    fetchWorkerJobs(page, size, where, sort){ 
        let self = this;    
        this.props.fetchWorkerJobsCount(where).then(function(response){ 
            let data = response.payload.data; 
            if(data.header.error){ 
                //@todo show error on input form 
                //self.handleShowError(data.header.message);                 
            }else{ 
                return data.body.recordset.record; 
 
            } 
        }) 
        .then((count)=>{ 
            this.props.fetchWorkerJobs(page, size, where, sort).then(function(response){ 
                let data = response.payload.data; 
                if(data.header.error){ 
                    //@todo show error on input form 
                    //self.handleShowError(data.header.message);                 
                }else{ 
                    self.options.page = page; 
                    self.options.sizePerPage = size; 
                    self.workerJobs = data.body.recordset.record; 
                    self.setState({ 
                        data : data.body.recordset.record, 
                        totalDataSize : count 
                    }); 
                } 
            }); 
        }); 
 
    } 
 
    moveElement() { 
      //store a this ref, and 
      var _this = this; 
      //wait for a paint to do scrolly stuff 
      window.requestAnimationFrame(function() { 
          if($(".react-bs-table-tool-bar").length > 0){ 
              if($(".react-bs-table-tool-bar .react-bs-table-sizePerPage-dropdown").length <= 0){ 
 
                  $(".react-bs-table-sizePerPage-dropdown").prependTo(".react-bs-table-tool-bar"); 
              } 
          } 
      }); 
    } 
 
    renderTable(services) { 
 
        return ( 
            <BootstrapTable 
                keyField="worker_job_id" 
                data={services} 
                remote 
                //multiColumnSearch 
                fetchInfo={ { dataTotalSize: this.state.totalDataSize } } 
                options={this.options} 
                pagination 
                striped 
                hover 
                //insertRow 
                //search 
                tableHeaderClass="table-vf thead" 
                exportCSV 
                tableContainerClass="report_workerjobs" 
            > 
                <TableHeaderColumn dataField="worker_job_id" dataSort={true} width={`60px`}> 
                    # 
                </TableHeaderColumn> 
                <TableHeaderColumn dataField="job" filter={ { type: 'SelectFilter', options: jobType } }>Job</TableHeaderColumn> 
                <TableHeaderColumn dataField="filename">Filename</TableHeaderColumn> 
                <TableHeaderColumn 
                    dataField="flag" 
                    filter={{ type: 'TextFilter', defaultValue: 'C' }} 
                    width={`60px`} 
                > 
                    Flag 
                </TableHeaderColumn> 
                <TableHeaderColumn dataField="total_time_taken" width={`125px`}>Total Time Taken</TableHeaderColumn> 
                <TableHeaderColumn dataField="output" width={`100px`}>Analysis</TableHeaderColumn> 
                <TableHeaderColumn dataField="ts_created">Created</TableHeaderColumn> 
                <TableHeaderColumn dataField="ts_updated">Finished</TableHeaderColumn>      
                <TableHeaderColumn dataField="comms_matrix_id" width={`60px`}>#CM</TableHeaderColumn> 
                <TableHeaderColumn dataField="visible_lines" width={`100px`}>Visible Lines</TableHeaderColumn> 
                <TableHeaderColumn  
                    dataField="security_flows"  
                    width={`100px`}  
                    thStyle={{ 
                        whiteSpace: 'pre-wrap', 
                        whiteSpace: '-moz-pre-wrap', 
                        whiteSpace: '-pre-wrap', 
                        whiteSpace: '-o-pre-wrap', 
                        wordWrap: 'break-word' 
                        }}  
                > 
                    Security Flows 
                </TableHeaderColumn> 
 
            </BootstrapTable> 
        ); 
    } 
 
    render() { 
        if(!this.runOnce && this.props.isReady){              
            this.runOnce = true; 
            this.fetchWorkerJobs(this.options.page, this.options.sizePerPage, this.where, this.sort); 
        } 
 
        let table = <div>Loading...<i className="fa fa-spinner fa-spin"></i></div>; 
        if ( Object.keys(this.props.reportsWorkerJobs).length > 0) { 
            table = this.renderTable(this.state.data); 
            this.moveElement(); 
        } 
 
        return ( 
            <div className="container-fluid"> 
                <div className="row-fluid top-buffer">{table}</div> 
            </div> 
        ); 
    } 
} 
 
function mapStateToProps(state) { 
 
    return { 
        reportsWorkerJobs: state.reportsWorkerJobs, 
        reportsWorkerJobsCount: state.reportsWorkerJobsCount 
    }; 
} 
 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators( 
        { fetchWorkerJobs, fetchWorkerJobsCount }, 
        dispatch 
    ); 
} 
 
export default connect(mapStateToProps, mapDispatchToProps)(WorkerJobs);

我想取消以前的分页请求等。我需要取消

this.props.fetchWorkerJobsCount.cancel(); //not working 
        this.props.fetchWorkerJobs.cancel(); //not working

我尝试从操作文件导出变量并导入到组件中，但这不起作用

actions.js

export const FETCH_WORKERJOBS_COUNT_CANCEL = wjc_cancel;

组件

... 
import { fetchWorkerJobs, fetchWorkerJobsCount, FETCH_WORKERJOBS_COUNT_CANCEL, FETCH_WORKERJOBS_CANCEL } from '../../actions'; 
... 
onPageChange(page, sizePerPage) { 
        const currentIndex = (page - 1) * sizePerPage; 
        this.options.page = page; 
        FETCH_WORKERJOBS_COUNT_CANCEL(); 
        FETCH_WORKERJOBS_CANCEL(); 
        this.fetchWorkerJobs(page, sizePerPage, this.where, this.sort); 
      }

我得到的错误是Uncaught TypeError: (0, _actions.FETCH_WORKERJOBS_COUNT_CANCEL) is not a function

更新

我尝试将其作为变量传递给操作函数，但有些请求似乎通过了。我正在做的就是非常快速地按下分页上的下一个按钮。大多数被取消，但有些没有。

export function fetchWorkerJobs(page, size, where, sort, cancelled) { 
    if(cancelled){ 
        wj_cancel(); 
 
    } 
    const request = axios.get(`/api/user/report/comms/matrix/upload/format/json?quiet=1&page=`+page+`&size=`+size+`&where=`+JSON.stringify(where)+`&sort=`+sort,{ 
        cancelToken: new CancelToken(function executor(c) { 
            // An executor function receives a cancel function as a parameter 
            wj_cancel = c; 
        }) 
    });  
    return { 
        type: FETCH_WORKERJOBS, 
        payload: request 
    }; 
}

请您参考如下方法:

您需要访问 source 变量才能取消它。

或者，您可以在创建新请求时取消上一个请求(这似乎是您的用例)。

类似于以下内容(使用执行器函数语法:https://github.com/axios/axios#cancellation，这样您就可以为每个请求获得一个新 token )

import axios from 'axios'; 
import $ from 'jquery'; 
var CancelToken = axios.CancelToken; 
let wj_cancel, wjc_cancel; 
 
export const FETCH_WORKERJOBS = 'fetch_workerjobs'; 
 
export function fetchWorkerJobs(page, size, where, sort) { 
  wj_cancel && wj_cancel(); 
  const request = axios.get(`/api/user/report/comms/matrix/upload/format/json?quiet=1&page=` + page + `&size=` + size + `&where=` + JSON.stringify(where) + `&sort=` + sort, { 
    cancelToken: new CancelToken(function executor(c) { 
        // An executor function receives a cancel function as a parameter 
        wj_cancel = c; 
      } 
  }); 
  return { 
    type: FETCH_WORKERJOBS, 
    payload: request 
  }; 
} 
 
export const FETCH_WORKERJOBS_COUNT = 'fetch_workerjobs_count'; 
 
export function fetchWorkerJobsCount(where) { 
  wjc_cancel && wjc_cancel(); 
  const request = axios.get(`/api/user/report/comms/matrix/upload/count/format/json?quiet=1&where=` + JSON.stringify(where), { 
    cancelToken: new CancelToken(function executor(c) { 
        // An executor function receives a cancel function as a parameter 
        wjc_cancel = c; 
      } 
  }); 
  return { 
    type: FETCH_WORKERJOBS_COUNT, 
    payload: request 
  }; 
}

IT虾米网 ios

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐

reactjs之如何在react中使用redux取消之前的axios

Q : 823053937

热贴推荐

reactjs之如何在react中使用redux取消之前的axios

ios之React Native 项目从 Xcode 运行，但不从命令行运行

javascript之默认查询参数未在 axios 请求中传递

reactjs之在 axios 的所有实例中使用的 axios 中间件

reactjs之axios 中的 GraphQL post 请求

ios之React Native之禁用 iOS 键盘上的密码自动填充选项

django之从 ReactJs/Axios 下载的 Zip 文件已损坏

ReactJS axios 拦截器如何调度注销操作

reactjs之如何使用 React Native iOS 访问手机的摄像头

reactjs之输入reactjs时取消axios get请求

ajax之axios跨域

reactjs之如何限制React native ios/android日期选择器中的日期选择

reactjs之在 React 中处理 Axios 错误