Question

我正在尝试实现取消功能，以取消视频的文件上传。这是视频上传时前端的外观

这是我使用axios发布请求的代码：

const appRoutes: Routes = [
  { path: 'uno/:id', 
    component: HomePageComponent 
  },
  { path: 'uno/search',      
    component: OtherComponent
  }
 ];

这是前端的代码：

export function processPost (body, callback, errorUpdate) {
// config for post
var config = {
  timeout: 300000,
  headers: { 'content-type': 'multipart/form-data' }

}

// url for server endpoint
var url = 'http://localhost:5000/uploader'

// actual post
axios
  .post(url, body, config)
  .then(callback)
  .catch(function (error) {
    // Non 200 Response
    if (error.response) {
      errorUpdate('non 200 response from server')
      // Request made but no response received
    } else if (error.request) {
      errorUpdate('no response from server')
      // something else happened
    } else {
      errorUpdate('Something Else Happened')
    }
    throw error
  })
}

我将如何在Axios中实现取消功能，以便当用户单击“取消”按钮时，发帖请求将被取消？任何帮助深表感谢。谢谢！

Answer 1

我认为应该这样：

您首先必须创建一个取消令牌，如下所示，并在axios发布请求之前添加它

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

然后将cancelToken: source.token添加到您的axios配置

var config = {
    /* ... */
    cancelToken: source.token,
}

现在您必须以某种状态存储source，因此请将其放在axios帖子之后

this.setState({source});

最终创建一个handleCancel()方法，并在用户单击“取消”按钮时调用它

handleCancel() {
    this.state.source.cancel()
}

Answer 2

您需要使用CancelToken。

基本上，在使用axios.post时，您需要在config对象中传递一个canceltoken，当您想要取消时，可以调用cancel函数。

示例：

let cancelTokenSource = axios.CancelToken.source（）;

然后在请求配置对象中将令牌作为cancelToken传递例如，config = {... otherConfigs，cancelToken：cancelTokenSource.token}

现在，我们可以使用cancelTokenSource.cancel（'上传已取消'）;单击某些取消按钮可取消要说的任何地方。

使用Axios取消文件上传发布请求

2 个答案: