Reactjs 如何在react中使用redux取消以前的axios
我的操作文件中有以下操作Reactjs 如何在react中使用redux取消以前的axios,reactjs,react-redux,axios,Reactjs,React Redux,Axios,我的操作文件中有以下操作 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) {
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
令牌
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);
我尝试从动作文件导出变量并导入到组件中,但这不起作用
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);
}
我得到的错误是未捕获类型错误:(0,\u actions.FETCH\u WORKERJOBS\u COUNT\u CANCEL)不是函数
更新
我试图将其作为变量传递给actions函数,但有些请求似乎通过了。我正在做的是快速按下分页上的“下一步”按钮。大多数会被取消,但有些不会
您需要访问源
变量才能取消它
或者,您可以在创建新请求时取消以前的请求(这似乎是您的用例)
类似于以下内容(使用executor函数语法:因此您可以为每个请求获得一个新令牌)
从“axios”导入axios;
从“jquery”导入美元;
var CancelToken=axios.CancelToken;
让wj_取消,wjc_取消;
export const FETCH_WORKERJOBS='FETCH_WORKERJOBS';
导出函数fetchWorkerJobs(页面、大小、位置、排序){
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:新的cancelToken(函数执行器(c){
//executor函数接收cancel函数作为参数
wj_cancel=c;
}
});
返回{
类型:FETCH_WORKERJOBS,
有效载荷:请求
};
}
export const FETCH_WORKERJOBS_COUNT='FETCH_WORKERJOBS_COUNT';
导出函数fetchWorkerJobsCount(其中){
wjc_cancel&&wjc_cancel();
const request=axios.get(`/api/user/report/comms/matrix/upload/count/format/json?quiet=1&where=`+json.stringify(where){
cancelToken:新的cancelToken(函数执行器(c){
//executor函数接收cancel函数作为参数
wjc_cancel=c;
}
});
返回{
类型:获取\u WORKERJOBS\u计数,
有效载荷:请求
};
}
以下是可以使用的代码:
// get info in component
useEffect(() => {
const cancelToken = customAxios.CancelToken.source();
dispatch(fetchStream(match.params.id, cancelToken.token));
return () => {
cancelToken.cancel(`Cancel fetchStream ${match.params.id}`)
}
}, []);
// where fetchStream in store/actions/streams.js
export const fetchStream = (id, cancelToken) => async dispatch => {
try {
const {data: stream} = await axios.get(`/streams/${id}`, {
cancelToken
});
dispatch({
type: FETCH_STREAM,
payload: stream
})
} catch (e) {
console.log("fetchStream get error ", e);
}
};
我如何从我的数据库中访问let wj_cancel,wjc_cancel;
component@shorif2000这个想法是,当您尝试进行新的提取时,fetchWorkerJobsCount
和fetchWorkerJobs
会自己调用它。哦……这在任何地方都写得不太清楚。让我感到困惑。@shorif2000或者您可以导出wo变量并导入它们以在组件中使用。export const FETCH_WORKERJOBS_COUNT_CANCEL=wjc_CANCEL;
导出另一个初始值为wjc_CANCEL
的变量,该变量将是未定义的。您需要直接导出wjc_CANCEL
。export wj_CANCEL;
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
};
}
// get info in component
useEffect(() => {
const cancelToken = customAxios.CancelToken.source();
dispatch(fetchStream(match.params.id, cancelToken.token));
return () => {
cancelToken.cancel(`Cancel fetchStream ${match.params.id}`)
}
}, []);
// where fetchStream in store/actions/streams.js
export const fetchStream = (id, cancelToken) => async dispatch => {
try {
const {data: stream} = await axios.get(`/streams/${id}`, {
cancelToken
});
dispatch({
type: FETCH_STREAM,
payload: stream
})
} catch (e) {
console.log("fetchStream get error ", e);
}
};