axios防止多次请求 · Vue2.x · 看云

川长思鸟来 2023-09-25 12:10 13阅读 0赞

\[TOC\]

\#\#\#\# Vue 中 Axios 防止多次请求

1. main.js 入口文件全局绑定axios

~~~

import Vue from 'vue'

import 'https://www.kancloud.cn/cooldrw2015/vue\_2/plugins/axios'

import App from 'https://www.kancloud.cn/cooldrw2015/vue\_2/App.vue'

import router from 'https://www.kancloud.cn/cooldrw2015/vue\_2/router'

import Axios from 'axios';

Vue.prototype.$http=Axios

Vue.config.productionTip=false

new Vue(\{

router,

render: h=> h(App)

\}).$mount('\#app')

~~~

\*\*\*\*\*

2. 组件中使用

>\[danger\] 注意：需要先定义cancelRequest() 方法，然后再axios 请求前 先调用该方法

cancelRequest() 此方法用于终止请求

~~~

methods: \{

// 1. 定义终止请求方法

cancelRequest() \{

if (typeof this.source==='function') \{

this.source('终止请求!')

\}

\},

getData() \{

// 2. 先调用终止请求方法

this.cancelRequest()

// 3. 注意 this 指向

let that=this;

// 4. 请求服务器api

this.$http.get(\`/api/searchList?cityId=10&kw=$\{this.keywords\}\`, \{

cancelToken: new this.$http.CancelToken( function executor(c) \{

that.source=c

\} )

\})

.then(res=> \{

if (res.data.msg==='ok')

\{

this.list=res.data.data.movies.list

\}

\}).catch(err=> \{

if (err) \{

if (this.$http.isCancel(err)) \{

// 终止多次请求 请求取消 返回取消后的信息

console.log('请求取消', err.message)

\} else \{

// 服务端数据异常

console.log('没有搜索到数据哦')

this.list=\[\]

\}

\}

\})

\}

\}

~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3.x axios跨域请求的问题

描述一般请求的url地址与项目所在地址不一致便会触发跨域请求，若没有跨域措施，一般会抛出No 'Access-Control-Allow-Origin' 错误 ...

阳光穿透心脏的1/2处/ 2024年04月18日 13:54/ 0 赞/ 39 阅读

相关 vue2【axios请求】

1：axios作用 axios（发音：艾克c奥斯）是前端圈最火的，专注于数据请求的库。 ![835fb801d68940f0990c2b34073a98b3.png][

红太狼/ 2024年02月18日 10:09/ 0 赞/ 12 阅读

相关 axios防止多次请求 · Vue2.x · 看云

　　\[TOC\] 　　\\\\ Vue 中 Axios 防止多次请求　　1. main.js 入口文件全局绑定axios 　　~~~ 　　import Vue fr

川长思鸟来/ 2023年09月25日 12:10/ 0 赞/ 14 阅读

相关 axios如何终止多次请求

一、需求分析在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到的结果不是我们想要的，并且对性能也有非常大的影响。例如一个搜索框，每输入一个字符都要发送一次请

àì夳堔傛蜴生んèń/ 2023年07月22日 02:44/ 0 赞/ 103 阅读

相关 vue axios请求封装

axios.defaults.baseURL = 'http://172.16.26.133:8080/XCPS'; //填写域名 //http request

红太狼/ 2023年01月03日 14:17/ 0 赞/ 230 阅读

相关 vue axios发送请求

baseData.js if (location.href.includes("baidu")) { apiBaseUrl = 'https://www.

分手后的思念是犯贱/ 2022年12月17日 07:11/ 0 赞/ 207 阅读

相关防止多次触发

//防止多次触发 var $this = $(this); var _nowTime

青旅半醒/ 2022年09月23日 05:59/ 0 赞/ 173 阅读

相关 struts2令牌环token防止多次请求登录

登录表单页面 ![这里写图片描述][SouthEast] <s:token></s:token> struts2配置拦截token <!--自定

绝地灬酷狼/ 2022年06月04日 01:19/ 0 赞/ 163 阅读

相关 Vue 请求数据（axios）

Vue axios请求数据与vue-resource请求数据有所不同步骤如下： 1.安装 npm install axios --save / npm install

电玩女神/ 2022年03月24日 14:54/ 0 赞/ 279 阅读

相关 vue+axios请求示例

前言：该项目示例是已经封闭好的axios -------------------- 1：目录结构 PS：request.js文件是封闭axios文件 ![在这里插

朴灿烈づ我的快乐病毒、/ 2021年07月24日 17:02/ 0 赞/ 552 阅读