封装过后的axios 怎么终止请求

封装后的axios通常会提供一些高级功能，包括对请求的管理，比如取消正在进行的请求。在使用像`axios.CancelToken`这样的特性时，你可以这样做：

1. 创建一个新的CancelToken实例：

const cancelTokenSource = axios.CancelToken.source();

2. 当需要发起请求时，传递这个CancelToken到axios实例的配置里：

const config = {
  method: 'GET',
  url: 'your-url',
  cancelToken: cancelTokenSource.token,
};

3. 如果需要取消请求，只需调用CancelToken源的cancel方法：

// 调用某个函数前可以先保存cancel方法
const cancelRequest = () => cancelTokenSource.cancel('Operation cancelled.');

// 在适当的时候调用它，如用户点击取消操作
if (shouldCancel) {
  cancelRequest();
}

这样，如果`cancelRequest()`被调用，任何使用了这个CancelToken的请求都会被立即中断。

相关问题

vue2封装axios接口请求

好的，这是一个简单的Vue2封装Axios接口请求的示例代码：

1. 安装Axios

npm install axios --save

2. 创建一个Api.js文件，在其中封装Axios请求

import axios from 'axios'

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理，例如添加token等等
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应之后做一些处理
    const res = response.data
    if (res.code !== 200) {
      console.log(res.msg)
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 封装get请求
export function get(url, params) {
  return service({
    url: url,
    method: 'get',
    params: params
  })
}

// 封装post请求
export function post(url, data) {
  return service({
    url: url,
    method: 'post',
    data: data
  })
}

3. 在Vue组件中使用Api.js中的方法

import { get, post } from '@/api/Api.js'

export default {
  name: 'Example',
  methods: {
    // get请求示例
    async getUserInfo() {
      try {
        const res = await get('/user/info', { id: 1 })
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },

    // post请求示例
    async login() {
      try {
        const res = await post('/user/login', { username: 'admin', password: '123456' })
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  }
}

以上就是一个简单的Vue2封装Axios接口请求的示例代码，希望能对你有所帮助。

vue统一封装axios请求 取消重复请求

在Vue项目中，我们通常会使用axios来发送请求。为了方便管理和维护代码，我们可以将axios请求进行统一封装。

首先，我们需要在项目中安装axios：

npm install axios --save

然后，我们可以在src目录下新建一个api目录，用来存放所有的接口请求。在api目录下，我们可以新建一个request.js文件，用来封装axios请求：

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
  // 在请求发送之前做一些处理
  return config;
}, error => {
  // 处理请求错误
  console.log(error);
  Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(
  response => {
    // 在接收响应做一些处理，例如统一的错误处理
    return response.data;
  },
  error => {
    console.log('err' + error);// for debug
    return Promise.reject(error);
  }
)

export default service;

这里我们创建了一个axios实例，并进行了一些配置，例如设置请求超时时间、拦截请求和响应等。并且将其导出，其他地方可以直接引用该实例进行请求。

接下来，我们可以在api目录下新建一个模块，例如user.js，用来存放用户相关的接口请求。在user.js中，我们可以这样写：

import request from '@/api/request';

export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

这里我们引入了之前封装的axios实例，然后对外导出两个方法login和getInfo，分别用来请求登录和获取用户信息的接口。

最后，我们可以在Vue组件中使用这些接口，例如：

import { login, getInfo } from '@/api/user';

export default {
  name: 'Login',
  methods: {
    handleLogin() {
      login(this.username, this.password).then(response => {
        // 处理登录成功的逻辑
        getInfo(response.token).then(info => {
          // 处理获取用户信息成功的逻辑
        })
      })
    }
  }
}

这里我们引入了之前定义的login和getInfo方法，并在handleLogin方法中调用它们。需要注意的是，我们在处理登录成功后，还调用了getInfo方法来获取用户信息。这里我们可以看到，我们可以将多个请求串联起来进行处理。

在实际开发中，我们经常会遇到重复请求的问题，例如多次点击提交按钮或者页面切换时进行数据加载等。为了避免重复请求，我们可以对axios进行进一步封装，例如：

import axios from 'axios';

// 定义一个空的数组，用来存储每个请求的取消函数和标识
const pending = [];
const CancelToken = axios.CancelToken;
const removePending = (config) => {
  for (let i = 0; i < pending.length; i++) {
    if (pending[i].url === config.url + '&' + config.method) {
      pending[i].cancel(); // 取消重复请求
      pending.splice(i, 1); // 删除已经取消的请求记录
    }
  }
}

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
  // 在请求发送之前做一些处理
  removePending(config);
  config.cancelToken = new CancelToken((c) => {
    pending.push({ url: config.url + '&' + config.method, cancel: c });
  });
  return config;
}, error => {
  // 处理请求错误
  console.log(error);
  Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(
  response => {
    // 在接收响应做一些处理，例如统一的错误处理
    removePending(response.config);
    return response.data;
  },
  error => {
    console.log('err' + error);// for debug
    return Promise.reject(error);
  }
)

export default service;

这里我们定义了一个pending数组，用来存储每个请求的取消函数和标识。在每次请求发送之前，我们会先调用removePending函数，用来取消重复请求。在每次请求完成之后，我们会再次调用removePending函数，用来删除已经取消的请求记录。这样就可以避免重复请求的问题了。