Vue路由切换和Axios接口取消重复请求详解

Vue路由切换

Vue路由切换指的是在Vue单页应用中，通过使用Vue Router实现不同页面之间的切换。

1. 首先需要在项目中安装Vue Router。

npm install vue-router --save

1. 在Vue项目的入口文件中引入Vue Router，并定义路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

1. 在Vue项目的App.vue文件中使用路由

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

1. 在Vue项目的main.js文件中嵌入路由

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

通过以上步骤，Vue实现路由切换，可以让我们实现单页应用，更好地提高用户体验。

Axios接口取消重复请求

当我们使用Axios库发送请求时，在网络较慢或者数据量较大的情况下，可能会出现用户重复请求的情况。为了防止这种情况的发生，我们可以学习如何在Axios中实现取消重复请求的操作。

1. 首先需要安装Axios。

npm install axios --save

1. 在Vue项目中封装Axios请求。

import axios from 'axios';

//创建axios实例
const axiosInstance = axios.create({
  baseURL: '/api',
  timeout: 10000,
  headers: {
    'Content-type': 'application/json'
  }
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const requestKey = getRequestIdentifier(config);
    removePendingRequest(requestKey, true);
    config.cancelToken = new CancelToken((c) => {
      addPendingRequest(requestKey, c);
    });
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    removePendingRequest(getRequestIdentifier(response.config));
    return response;
  },
  error => {
    removePendingRequest(getRequestIdentifier(error.config));
    if (Axios.isCancel(error)) {
      console.warn(`请求被取消：${error.message}`);
    } else {
      console.error(`请求出错：${error.message}`);
    }
    return Promise.reject(error);
  }
);

//取消重复的请求
const pendingRequest = new Map();
const addPendingRequest = (config, cancel) => {
  const requestKey = getRequestIdentifier(config);
  config.cancelToken.promise.then((res) => {
    removePendingRequest(requestKey);
  });
  if (!pendingRequest.has(requestKey)) {
    pendingRequest.set(requestKey, cancel);
  }
};

const removePendingRequest = (requestKey, isCancel = false) => {
  if (pendingRequest.has(requestKey)) {
    if (isCancel) {
      pendingRequest.get(requestKey)(`请求被取消：${requestKey}`);
    }
    pendingRequest.delete(requestKey);
  }
};

const getRequestIdentifier = (config) => {
  let {method, url, data, params} = config;
  return [method, url, JSON.stringify(data), JSON.stringify(params)].join('|');
};

export default axiosInstance;

通过使用请求拦截器和响应拦截器，我们可以在发送请求和接收响应的时候，判断是否已经存在重复请求，并且实现取消重复请求的操作。

1. 在Vue项目中使用Axios请求。

import axiosInstance from '@/api/base';

//发送请求
axiosInstance.get('/test').then(res => {
  console.log(res);
}).catch(e => {
  console.log(e);
});

通过以上步骤，我们可以在Vue项目中使用Axios发送请求，并且实现取消重复请求的功能。