Home Web Front-end JS Tutorial How to implement vue+axios interrupt request when switching pages

How to implement vue+axios interrupt request when switching pages

Apr 12, 2018 am 11:22 AM
interrupt ask

This time I will show you how to implement vue axios to interrupt the request when switching pages. What are the things to pay attention to when implementing vue axios to interrupt the request when switching pages? The following is a practical case, let's take a look. .

is as follows:

Vue.prototype.$ajax=axios; 
const CancelToken = axios.CancelToken;
let cancel;
let cancelAjaxText = '中断成功';
Vue.prototype.post = function(url,data,loading){
 	var ajax = Vue.prototype.$ajax({
	   	method: 'post',
	   	url:url,
	   	data: data,
	   	cancelToken: new CancelToken(c => { //强行中断请求要用到的
	   	cancel = c
	   	})
	  }).then(res =>res.data,res=>{ //中断请求和请求出错都会走这里,我这里用 cancelAjaxText 来区别
	  	if(res.message == cancelAjaxText){ 
	  		return {status : false,msg:cancelAjaxText}
	  	}else{
	  		this.$confirm('登录过时,是否重新登录', '提示', {
			   	confirmButtonText: '确定',
			   	cancelButtonText: '取消',
			   	type: 'warning'
			  }).then(() => {
			   	window.location.href = Vue.prototype.url_head + '/';
			  }).catch(() => {
			   	  
			  });
	  	}
		 		 	
			})
 	return ajax;
};
Copy after login
Connect to axios and add cancelToken data in the POST method. In the else above, interrupt requests and request errors will go there, so use a msg to identify it (because

Interface

also has a msg in the return, unify it) ;

The following is the method of interrupting the request, which is placed in the listening router of

routingswitch.beforeEach, cancel is the method of interrupting, which is taken out from the cancelToken of the post

Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 
 if(cancel){ 
  cancel(cancelAjaxText); 
 } 
}
Copy after login
rrree

Calling post

router.beforeEach((to, from, next) => { 
<span style="white-space:pre;"> </span>Vue.prototype.cancelAjax()  
 next(); 
});
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of js data types


Detailed explanation of the steps for using deep and shallow copies of JS


The above is the detailed content of How to implement vue+axios interrupt request when switching pages. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to make cross-domain requests in Vue? How to make cross-domain requests in Vue? Jun 10, 2023 pm 10:30 PM

Vue is a popular JavaScript framework for building modern web applications. When developing applications using Vue, you often need to interact with different APIs, which are often located on different servers. Due to cross-domain security policy restrictions, when a Vue application is running on one domain name, it cannot communicate directly with the API on another domain name. This article will introduce several methods for making cross-domain requests in Vue. 1. Use a proxy A common cross-domain solution is to use a proxy

How to launch Terminal in the center of the screen on Windows 11 How to launch Terminal in the center of the screen on Windows 11 Mar 20, 2024 pm 06:26 PM

Windows Terminal is a commonly used command line tool in Windows operating systems, usually opened in the upper left corner of the screen. However, if you wish to launch a Terminal window from a central location in Windows 11, we can provide you with a detailed guide on how to do so. How to Launch Terminal in the Center of the Windows 11 Screen There are two ways to set the Windows Terminal to open in the center instead of the top left corner. One is to modify the Settings.json file, and the other is to implement it through terminal settings. 1] Change Terminal Settings In this method, you can set the Windows Terminal to open in the center of the screen by modifying the Terminal startup settings. Here's how: Right-click the Start menu and select Windows Terminal (Admin

Disable or enable automatic copy selection for copying in Terminal Disable or enable automatic copy selection for copying in Terminal Mar 24, 2024 am 09:46 AM

This article will show you how to enable or disable automatic copying of selections to the clipboard in Windows Terminal. Windows Terminal is a multi-tab terminal emulator developed by Microsoft specifically for Windows 11/10, replacing the traditional command prompt. It supports running applications such as Command Prompt, PowerShell, WSL, Azure, etc. Often when working in the terminal, users need to copy commands and output, however the terminal does not support copying selection operations by default. Keep reading this article to learn how to fix this issue. How to enable or disable automatic copying of selections to cache in Terminal? Here's how you can enable or disable automatic copying of selections to the Terminal clipboard: Open the Terminal application and click above

How to use context to implement request retry strategy in Go How to use context to implement request retry strategy in Go Jul 21, 2023 pm 04:39 PM

How to use context to implement request retry strategy in Go Introduction: When building a distributed system, network requests will inevitably encounter some failures. In order to ensure the reliability and stability of the system, we usually use a retry strategy to handle these failed requests to increase the success rate of the request. In the Go language, we can use the context package to implement the request retry strategy. This article will introduce how to use the context package in Go to implement a request retry strategy, with code examples. 1. What is

How Nginx implements request rewrite configuration based on request URL How Nginx implements request rewrite configuration based on request URL Nov 08, 2023 pm 04:15 PM

Nginx is a lightweight, high-performance web server that not only supports advanced functions such as reverse proxy and load balancing, but also has powerful request rewriting capabilities. In actual web applications, in many cases the request URL needs to be rewritten to achieve better user experience and search engine optimization effects. This article will introduce how Nginx implements request rewriting configuration based on the request URL, including specific code examples. Rewrite syntax In Nginx, you can use the rewrite directive to perform request rewriting. its basic language

Common application scenarios of the Head request method in Laravel Common application scenarios of the Head request method in Laravel Mar 06, 2024 pm 09:33 PM

Common application scenarios of the Head request method in Laravel In Laravel, the HEAD method in the HTTP request method is usually used to obtain the metadata of the resource without obtaining the actual content. The HEAD request is similar to the GET request, but does not return the actual response body content, only the response header information. This makes the HEAD request very useful in some specific scenarios. The following are some common application scenarios and corresponding code examples. Verify the validity of the link using the HEAD request method can be used to verify the chain

How to use Hyperf framework for request retries How to use Hyperf framework for request retries Oct 24, 2023 am 09:37 AM

How to use the Hyperf framework for request retry. With the unpredictability of network communication, we often encounter request failures in application development. In order to ensure the stability and robustness of the application, we can increase the success rate of requests through the request retry mechanism. In the Hyperf framework, we can use the Retry component provided by Hyperf to implement the request retry function. This article will introduce in detail how to use the Retry component in the Hyperf framework and give specific code examples. First, we need to

How to use context to implement request idempotence in Go How to use context to implement request idempotence in Go Jul 21, 2023 pm 12:37 PM

How to use context to implement request idempotence in Go Introduction In web development, idempotence is a very important concept. It ensures that multiple executions of a request do not have inconsistent side effects on the system. When dealing with concurrent requests or when the network is unstable, using idempotence can ensure the security and reliability of requests. The context package in Go provides a mechanism to handle this situation. What is idempotence? Simply put, idempotence refers to the result of multiple executions of the same operation being the same as the result of one execution.

See all articles