小洛的前端技术博客

Appearance

axios请求封装及取消请求 ​

取消请求直接封装在axios中，不需要单独处理，直接在请求中使用取消请求即可

一、CancelToken ​

axios请求封装及取消请求 ​

js
import axios from 'axios'
let url = 'http://localhost:5173'
// if (process.env.VUE_APP_URL == 'production') {
//   url = process.env.VITE_API_URL
// } else {
//   url = process.env.VITE_API_URL
// }

// 创建一个取消令牌管理器
let cancelTokenSource = axios.CancelToken.source()

const service = axios.create({
  baseURL: url,
  timeout: 10000
})
// let loading
//请求拦截器，前端给后端发起请求，一般携带token
service.interceptors.request.use(
  (config) => {

     // 每次请求前都会重新创建一个取消令牌
    cancelTokenSource = axios.CancelToken.source()

    // 为请求配置添加取消令牌
    config.cancelToken = cancelTokenSource.token
    //添加请求头
    config.headers = {
      'Content-Type': 'application/json'
    }
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)
//响应拦截器，后端返回给前端数据
service.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(new Error(error.response))
  }
)

// 取消请求函数
export const cancelRequest = () => {
  cancelTokenSource.cancel('请求取消')
}

export default service
import axios from 'axios'
let url = 'http://localhost:5173'
// if (process.env.VUE_APP_URL == 'production') {
//   url = process.env.VITE_API_URL
// } else {
//   url = process.env.VITE_API_URL
// }

// 创建一个取消令牌管理器
let cancelTokenSource = axios.CancelToken.source()

const service = axios.create({
  baseURL: url,
  timeout: 10000
})
// let loading
//请求拦截器，前端给后端发起请求，一般携带token
service.interceptors.request.use(
  (config) => {

     // 每次请求前都会重新创建一个取消令牌
    cancelTokenSource = axios.CancelToken.source()

    // 为请求配置添加取消令牌
    config.cancelToken = cancelTokenSource.token
    //添加请求头
    config.headers = {
      'Content-Type': 'application/json'
    }
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)
//响应拦截器，后端返回给前端数据
service.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(new Error(error.response))
  }
)

// 取消请求函数
export const cancelRequest = () => {
  cancelTokenSource.cancel('请求取消')
}

export default service

封装接口函数 ​

js
import service from './request'

// 获取用户信息
export const getUserInfo = () => {
  return service({
    url: '/user/info',
    method: 'get'
  })
}
import service from './request'

// 获取用户信息
export const getUserInfo = () => {
  return service({
    url: '/user/info',
    method: 'get'
  })
}

页面使用 ​

js
import { getUserInfo } from '@/api/user'
import { cancelRequest } from '@/api/request'
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await getUserInfo()
        this.userInfo = res.data
      } catch (error) {
        cancelRequest()
        console.error(error)
      }
    }
  }
}
import { getUserInfo } from '@/api/user'
import { cancelRequest } from '@/api/request'
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await getUserInfo()
        this.userInfo = res.data
      } catch (error) {
        cancelRequest()
        console.error(error)
      }
    }
  }
}

取消请求 ​

这个取消请求可以在任意地方调用，比如在组件销毁时调用或者在请求失败时调用，还可以用一个按钮来触发取消请求。

js
import { cancelRequest } from '@/api/request'

// 在需要取消请求的地方调用
cancelRequest()
import { cancelRequest } from '@/api/request'

// 在需要取消请求的地方调用
cancelRequest()

二、AbortController ​

js
import axios from 'axios'

// 创建一个 AbortController 实例
let controller = new AbortController()

let url = 'http://localhost:5173'
// if (process.env.VUE_APP_URL == 'production') {
//   url = process.env.VITE_API_URL
// } else {
//   url = process.env.VITE_API_URL
// }
const service = axios.create({
  baseURL: url,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 将 AbortController 的 signal 附加到请求配置中
    config.signal = controller.signal

    config.headers = {
      'Content-Type': 'application/json'
    }

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(new Error(error.response))
  }
)

// 取消请求函数
export const cancelRequest = () => {
  controller.abort()
  // 重新创建一个新的 AbortController 以供下次请求使用
  controller = new AbortController()
}

export default service
import axios from 'axios'

// 创建一个 AbortController 实例
let controller = new AbortController()

let url = 'http://localhost:5173'
// if (process.env.VUE_APP_URL == 'production') {
//   url = process.env.VITE_API_URL
// } else {
//   url = process.env.VITE_API_URL
// }
const service = axios.create({
  baseURL: url,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 将 AbortController 的 signal 附加到请求配置中
    config.signal = controller.signal

    config.headers = {
      'Content-Type': 'application/json'
    }

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(new Error(error.response))
  }
)

// 取消请求函数
export const cancelRequest = () => {
  controller.abort()
  // 重新创建一个新的 AbortController 以供下次请求使用
  controller = new AbortController()
}

export default service

调用的话是一样的，看上面取消请求就行了

程序员小洛文档

Copyright © 2022-suntemple.cn.All right reserved