账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    axios 如何用拦截器,只保留某个接口最新的一次请求
    39
    0

    有这个一个使用场景,一个筛选页面,用户可以快速点击筛选条件,筛选条件一变,马上请求数据api,但是接口远在国外,可以理解为请求非常耗时,所以这个接口,经常会同时会有好几个请求在处理,然后页面数据会闪。

    所以我想,对于同一个url,所有请求只留最新,旧的请求无论是成功还是padding状态,都放弃,网上查好多文章都只是说取消重复请求问题,跟我想要的有点区别,加上对前端不熟悉(本菜是后台,首次写前端项目),想好久未能想明白,故此劳烦各位大佬,为小弟指点一二,不胜感激!

    现在已有拦截器如下(已删除无关代码)

    import axios from 'axios'
    const service = axios.create({
        baseURL: 'a.com',
    })
    service.interceptors.request.use(config => {
        return config
    }, error => {
        console.log(error)
        Promise.reject(error)
    })
    service.interceptors.response.use(
        response => response,
        error => {
            console.log('err' + error)
            return Promise.reject(error)
        })
    
    export default service
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ar烈酒℃灼言EL 普通会员 1楼

      在axios中,你可以使用拦截器来拦截请求并处理请求。如果你想只保留某个接口的最新一次请求,你可以使用axios.interceptors.request.use()方法来实现。这个方法接收一个回调函数,这个函数会在请求被发送之前被调用。你可以在这个回调函数中处理你的请求,然后在请求被发送时调用axios.interceptors.request.use()方法的回调函数。

      以下是一个例子:

      javascript axios.interceptors.request.use(function (config) { // 在这里添加你的请求处理代码 // 如果你想只保留这个接口的最新一次请求,你可以这样做 config.response.data.lastRequest = new Date().getTime(); return config; }, function (error) { // 如果请求失败,你可以在这里添加你的错误处理代码 return Promise.reject(error); });

      在这个例子中,config.response.data.lastRequest变量会保存每个接口的最新一次请求。你可以使用这个变量来决定应该保留哪些请求。

      注意:axios.interceptors.request.use()方法只会拦截首次请求。如果你想处理后续的请求,你需要在每次请求时调用这个方法的回调函数。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部