Vue + TypeScript 实战（六）axios封装

最新推荐文章于 2024-07-09 10:31:12 发布
最新推荐文章于 2024-07-09 10:31:12 发布
阅读量412 收藏
点赞数
分类专栏： Vue + TypeScript 实战 文章标签： typescript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shrimp6/article/details/124602579
版权

1、安装

yarn add axios

2、 通用功能

  • 正常请求该有的（跨域携带cookie，token，超时设置）
  • 请求响应拦截器
  • 取消重复请求
  • 响应状态封装
  • 解除重复请求锁定
  • 取消请求
  • 封装请求方法

3、功能实现

3.1 基础封装

axios设置拦截器：拦截每次请求和响应，简单使用方法如下：

  • axios.interceptors.request.use(请求成功拦截, 请求失败拦截)
  • axios.interceptors.response.use(响应成功拦截, 响应失败拦截)
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

// 创建axios实例
export const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8080/', // 基础路径
  timeout: 60 * 1000  //超时配置
})

// 请求拦截器
axiosInstance.interceptors.request
  .use((config: AxiosRequestConfig) => {
    // 在发送请求之前做些什么
    return config
  },(error:any) => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
axiosInstance.interceptors.response
  .use((response: AxiosResponse) => {
       // 对响应数据做点什么
      return response
    },(error:any) => {
    // 对响应错误做点什么
  return Promise.reject(error)
})

3.2 取消重复请求

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import {MessageType} from "element-ui/types/message";
import {Message} from "element-ui";

// 创建axios实例
export const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8080/', // 基础路径
  timeout: 60 * 1000  //超时配置
})


/**
 * toast提示
 * @param message
 * @param type
 */
function dialog (type: MessageType, message = '') {
  return Message({
    message,
    type,
    duration: 5000,
    showClose: true
  })
}

// 记录正在请求的接口
// 每次请求前都会把path放在此数组中，响应成功后清除此请求path
let listenPendingAjax: any = {} // 对应字段为true说明已有该请求，还未结束

// 请求拦截器
axiosInstance.interceptors.request
  .use((config: AxiosRequestConfig) => {
    if (!config.url) {
      return Promise.reject({
        isCancel: true,
        message: 'no url'
      })
    } else if (listenPendingAjax[config.url]) { // 拦截重复请求，为false时不做处理
      return Promise.reject({
        url: config.url,
        isCancel: true,
        message: '重复请求！'
      })
    } else if (!listenPendingAjax[config.url]) { // 正常请求
      if (!config.cancelToken) {
        const source = axios.CancelToken.source()
        config.cancelToken = source.token
        listenPendingAjax[config.url] = source
      } else {
        listenPendingAjax[config.url] = config.cancelToken
      }
    }
    return config
  },(error:any) => {
  return Promise.reject(error)
})

// 响应拦截器
axiosInstance.interceptors.response
  .use((response: AxiosResponse) => {
    if (response.config.url) {
      delete listenPendingAjax[response.config.url]
    }
      return response
    },(error:any) => {
    if (error.url && typeof error.url === 'string') {
      delete listenPendingAjax[error.url]
    } else { // 发生未知错误
      listenPendingAjax = {}
    }
  return Promise.reject(error)
})

3.3 响应状态封装

// 响应拦截器
axiosInstance.interceptors.response
  .use((response: AxiosResponse) => {
    if (response.config.url) {
      delete listenPendingAjax[response.config.url]
    }
      return response
    },(error:any) => {
    if (error.url && typeof error.url === 'string') {
      delete listenPendingAjax[error.url]
    } else { // 发生未知错误
      listenPendingAjax = {}
    }

    axios.isCancel(error) && console.log('Request canceled: ' + error)
    if (error.code === 'ECONNABORTED') {
      error.message = '系统繁忙，请稍候再试'
    }
    if (/timeout/.test(error.message)) {
      error.message = '系统超时，请稍候再试'
    }
    if (error.message === 'Network Error') {
      error.message = '网络错误，请检查网络情况'
    }
    error.message && dialog('error', error.message)
  return Promise.reject(error)
})

3.4 封装请求方法

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import {MessageType} from "element-ui/types/message";
import {Message} from "element-ui";
import qs from "qs";

// 创建axios实例
export const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8080/', // 基础路径
  timeout: 60 * 1000  //超时配置
})


/**
 * toast提示
 * @param message
 * @param type
 */
function dialog (type: MessageType, message = '') {
  return Message({
    message,
    type,
    duration: 5000,
    showClose: true
  })
}

// 记录正在请求的接口
// 每次请求前都会把path放在此数组中，响应成功后清除此请求path
let listenPendingAjax: any = {} // 对应字段为true说明已有该请求，还未结束

// 请求拦截器
axiosInstance.interceptors.request
  .use((config: AxiosRequestConfig) => {
    if (!config.url) {
      return Promise.reject({
        isCancel: true,
        message: 'no url'
      })
    } else if (listenPendingAjax[config.url]) { // 拦截重复请求，为false时不做处理
      return Promise.reject({
        url: config.url,
        isCancel: true,
        message: '重复请求！'
      })
    } else if (!listenPendingAjax[config.url]) { // 正常请求
      if (!config.cancelToken) {
        const source = axios.CancelToken.source()
        config.cancelToken = source.token
        listenPendingAjax[config.url] = source
      } else {
        listenPendingAjax[config.url] = config.cancelToken
      }
    }
    return config
  },(error:any) => {
  return Promise.reject(error)
})

// 响应拦截器
axiosInstance.interceptors.response
  .use((response: AxiosResponse) => {
    if (response.config.url) {
      delete listenPendingAjax[response.config.url]
    }
      return response
    },(error:any) => {
    if (error.url && typeof error.url === 'string') {
      delete listenPendingAjax[error.url]
    } else { // 发生未知错误
      listenPendingAjax = {}
    }
  return Promise.reject(error)
})


/**
 * 定义request类
 * 封装请求方法
 */

export default class ServerRequest {
  modulePath: string
  nativeAxios: AxiosInstance

  /**
   * Api构造函数
   * @param modulePath{string}
   */
  constructor (modulePath: string) {
    this.modulePath = modulePath
    this.nativeAxios = axiosInstance
  }

  /**
   * 获取调用api时整合出的url地址
   * @param url{string}
   * @returns {*}
   */
  getModulePathUrl (url: string): string {
    return /^https?:\/\//.test(url) ? url : this.modulePath + url
  }


  /**
   * axios的request方法
   * @param options{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  request (options: AxiosRequestConfig): Promise<AxiosResponse> {
    options.url = this.getModulePathUrl(options.url || '')
    return this.nativeAxios(options)
  }

  /**
   * get请求
   * @param url{string}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  get (url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.get(this.getModulePathUrl(url), config)
  }

  /**
   * post请求
   * @param url{string}
   * @param data{any}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  post (url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.post(this.getModulePathUrl(url), data, config)
  }

  /**
   * put请求
   * @param url{string}
   * @param data{any}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  put (url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.put(this.getModulePathUrl(url), data, config)
  }

  /**
   * delete请求
   * @param url{string}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  delete (url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.delete(this.getModulePathUrl(url), config)
  }

  /**
   * head请求
   * @param url{string}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  head (url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.delete(this.getModulePathUrl(url), config)
  }

  /**
   * patch请求
   * @param url{string}
   * @param data{any}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  patch (url: string, data: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.patch(this.getModulePathUrl(url), data, config)
  }
}

3.5 解除重复请求锁定

  /**
   * 解除重复请求锁定，可以多次请求，解除可能会出现数据展示错乱的情况
   * @param url{string}
   * @returns {ServerRequest}
   */
  unlock (url: string): ServerRequest {
    listenPendingAjax[this.getModulePathUrl(url)] = false
    return this
  }

3.6 取消上一次请求，能保证数据是后面的请求返回的

  /**
   * 取消上一次请求，能保证数据是后面的请求返回的
   * @param url
   * @param params
   */
  cancel (url: string, params?: any): ServerRequest {
    if (params) {
      const urlSearch = url.replace(/#.*$/, '').split('?')[1]
      const urlHash = url.split('#')[1] ? '#' + url.split('#')[1] : ''
      urlSearch && Object.assign(params, qs.parse(urlSearch))
      url = url.split('?')[0] + '?' + qs.stringify(params) + urlHash
    }
    const resUrl = this.getModulePathUrl(url)
    if (listenPendingAjax[resUrl]) {
      listenPendingAjax[resUrl].cancel()
      listenPendingAjax[resUrl] = undefined
    }
    return this
  }

3.7 完整代码

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import {MessageType} from "element-ui/types/message"
import {Message} from "element-ui"
import qs from "qs"

// 创建axios实例
export const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8080/', // 基础路径
  timeout: 60 * 1000  //超时配置
})


/**
 * toast提示
 * @param message
 * @param type
 */
function dialog (type: MessageType, message = '') {
  return Message({
    message,
    type,
    duration: 5000,
    showClose: true
  })
}

// 记录正在请求的接口
// 每次请求前都会把path放在此数组中，响应成功后清除此请求path
let listenPendingAjax: any = {} // 对应字段为true说明已有该请求，还未结束

// 请求拦截器
axiosInstance.interceptors.request
  .use((config: AxiosRequestConfig) => {
    if (!config.url) {
      return Promise.reject({
        isCancel: true,
        message: 'no url'
      })
    } else if (listenPendingAjax[config.url]) { // 拦截重复请求，为false时不做处理
      return Promise.reject({
        url: config.url,
        isCancel: true,
        message: '重复请求！'
      })
    } else if (!listenPendingAjax[config.url]) { // 正常请求
      if (!config.cancelToken) {
        const source = axios.CancelToken.source()
        config.cancelToken = source.token
        listenPendingAjax[config.url] = source
      } else {
        listenPendingAjax[config.url] = config.cancelToken
      }
    }
    return config
  },(error:any) => {
  return Promise.reject(error)
})

// 响应拦截器
axiosInstance.interceptors.response
  .use((response: AxiosResponse) => {
    if (response.config.url) {
      delete listenPendingAjax[response.config.url]
    }
      return response
    },(error:any) => {
    if (error.url && typeof error.url === 'string') {
      delete listenPendingAjax[error.url]
    } else { // 发生未知错误
      listenPendingAjax = {}
    }

    axios.isCancel(error) && console.log('Request canceled: ' + error)
    if (error.code === 'ECONNABORTED') {
      error.message = '系统繁忙，请稍候再试'
    }
    if (/timeout/.test(error.message)) {
      error.message = '系统超时，请稍候再试'
    }
    if (error.message === 'Network Error') {
      error.message = '网络错误，请检查网络情况'
    }
    error.message && dialog('error', error.message)
  return Promise.reject(error)
})


/**
 * 定义request类
 * 封装请求方法
 */

export default class ServerRequest {
  modulePath: string
  nativeAxios: AxiosInstance

  /**
   * Api构造函数
   * @param modulePath{string}
   */
  constructor (modulePath: string) {
    this.modulePath = modulePath
    this.nativeAxios = axiosInstance
  }

  /**
   * 获取调用api时整合出的url地址
   * @param url{string}
   * @returns {*}
   */
  getModulePathUrl (url: string): string {
    return /^https?:\/\//.test(url) ? url : this.modulePath + url
  }


  /**
   * axios的request方法
   * @param options{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  request (options: AxiosRequestConfig): Promise<AxiosResponse> {
    options.url = this.getModulePathUrl(options.url || '')
    return this.nativeAxios(options)
  }

  /**
   * get请求
   * @param url{string}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  get (url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.get(this.getModulePathUrl(url), config)
  }

  /**
   * post请求
   * @param url{string}
   * @param data{any}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  post (url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.post(this.getModulePathUrl(url), data, config)
  }

  /**
   * put请求
   * @param url{string}
   * @param data{any}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  put (url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.put(this.getModulePathUrl(url), data, config)
  }

  /**
   * delete请求
   * @param url{string}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  delete (url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.delete(this.getModulePathUrl(url), config)
  }

  /**
   * head请求
   * @param url{string}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  head (url: string, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.delete(this.getModulePathUrl(url), config)
  }

  /**
   * patch请求
   * @param url{string}
   * @param data{any}
   * @param config{AxiosRequestConfig}
   * @returns {Promise<AxiosResponse>}
   */
  patch (url: string, data: any, config?: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.nativeAxios.patch(this.getModulePathUrl(url), data, config)
  }

  /**
   * 解除重复请求锁定，可以多次请求，解除可能会出现数据展示错乱的情况
   * @param url{string}
   * @returns {ServerRequest}
   */
  unlock (url: string): ServerRequest {
    listenPendingAjax[this.getModulePathUrl(url)] = false
    return this
  }

  /**
   * 取消上一次请求，能保证数据是后面的请求返回的
   * @param url
   * @param params
   */
  cancel (url: string, params?: any): ServerRequest {
    if (params) {
      const urlSearch = url.replace(/#.*$/, '').split('?')[1]
      const urlHash = url.split('#')[1] ? '#' + url.split('#')[1] : ''
      urlSearch && Object.assign(params, qs.parse(urlSearch))
      url = url.split('?')[0] + '?' + qs.stringify(params) + urlHash
    }
    const resUrl = this.getModulePathUrl(url)
    if (listenPendingAjax[resUrl]) {
      listenPendingAjax[resUrl].cancel()
      listenPendingAjax[resUrl] = undefined
    }
    return this
  }
}

3.8 使用

import ServerRequest from '@/utils/request.ts'

const api = new ServerRequest('/api')

export interface login {
  userName: string,
  passWord: string
}

export default {
  /**
   * 登录
   */
  login: (data:login) => api.post('/login', data),
  /**
   * 测试
   */
  test:(data:{id:number,name:string}) => api.get('',{params: data})

}
Yushia-Lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vueaxios将axios整合到VueJS的封装
08-08
vue-axios：将axios整合到VueJS的封装
Vue + Typescript中Axios封装
weixin_41403689的博客
04-18 652
Vue + Typescript 中 Axios 封装
Vue3框架搭建2：axios+typescript封装
最新发布
u013035708的博客
07-09 515
axios+typescript封装
Vue + TypeScript + VueCli3+ 封装 axios 请求 并 解决跨域问题
窝窝头的博客
12-26 5892
一、版本说明 "vue": "^2.6.10", "axios": "^0.19.0", "@vue/cli-plugin-babel": "^4.0.0", "@vue/cli-plugin-router": "^4.0.0", "@vue/cli-plugin-typescript": "^4.0.0", "@vue/cli-plugin-vuex": "^4.0.0", "@vue/cl...
Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
蒋川@卡拉云
05-30 1426
本文完整版：《Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP》 Vue3 Typescript + Axios 全栈开发教程前端 Vue3 Typescript 项目结构安装 Vue3 ，使用 npm 安装 Vue接着我们创建一个 Vue 的项目，运行命令：处理前端问题太麻烦？「新增 ToDo 组件」 - AddTodo.vue「ToDO 列表组件」 - TodoList.vue「 ToDo 内容更新组件」 - Todo.vue Vue3 的源码使用 Type.
vue3.0中使用typescript封装axios
qq_36026686的博客
08-02 339
升级了vue3.0，如何用typescript封装axios？本文通过对axios的封装，展示typescript的新特性。
vue+ts下对axios的封装实现
10-15
在Vue.js和TypeScript的开发环境中，我们常常需要对第三方库如axios进行封装，以便更好地管理和定制网络请求。本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你...
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及Composition API等。使用Vue 3，开发者可以更加高效地构建用户界面，并享受更好的开发体验。 TypeScript ...
专栏：Vue3.0 + Typescript + axios + bootstrap +原始注释博客专栏作品
01-31
使用TypeScript语法 使用初步思想开发 使用ESLint语法规范 使用Axios进行数据获取 使用vue-router进行路由重组 使用Vuex进行数据管理 代码中包含清晰注释，方便阅读 文章内容支持markdown格式 如何运行 git clone ...
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
vue3_ts_axios_elementPlus:一个基于vue3 全家桶 + typescript+ element-plus+axios等 搭建的基础代码库, 有登录拦截鉴权，基本页面框架已经搭建好，可以直接进行各个模块开发
05-09
cli_demo一个基于vue3 全家桶 + typescript + element-plus 搭建的基础代码库,有登录拦截鉴权，基本页面框架已经搭建好，可以直接进行各个模块开发。:open_book: Vue3.0 相关文档：相关库名称在线地址 :link:Vue3.0 ...
Vue+Typescript中在Vue上挂载axios使用时报错问题
10-16
主要介绍了Vue+Typescript中在Vue上挂载axios使用时报错问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue封装axios请求
听海丶的博客
05-03 712
import axios from 'axios'; import router from '@/router'; import NProgress from 'nprogress'; import qs from "qs"; let $http = axios.create({ baseURL: process.env.baseURL, withCredentials: true, ...
TypeScript封装axios——Vue3+TypeScript实践
weixin_46567428的博客
01-03 2991
TypeScript封装axios简介1. 认识axios1.1 为什么选择axios2. axios基本使用3. 用面向对象的思想封装axios3.1 为什么要对axios进行封装？3.2 用面向对象的思想封装axios3.2.1 基础封装3.2.2 支持传入自定义拦截器功能4. 使用封装后的HRequest 简介 最近在用Vue3 + TypeScript 重构一个Vue2项目，之前项目中用到axios来发送网络请求，进行前后端交互，但并未对axios库做过多的封装，导致代码重复度较高，维护起来比较麻烦
用vue3和typeScript封装一个axios类工具，来降低代码的耦合度，方便后期的维护与开发
zayyo的博客
06-29 848
我们在日常使用axios时都是直接使用axios.request(config)来发送请求和instance.interceptors.request.use()来进行响应拦截， 但是如果后期axios这个项目不再维护了，或者我们要换成别的网络请求方式了。这样又怎么办呢？ 难道我们要一处一处的起修改我们的代码吗？重构我们的请求模块？ 这样不仅会给我们带来大量的工作量，而且代码的耦合度太高也会导致代码如果出现bug。 但是如果我们把axios在进行封装，封装出一个axios类，然后只让实例依赖axios，我们
TypeScript实战之用TS封装Axios
web全栈开发的博客
06-30 396
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情简介这是TypeScript实战的第三篇文章。前面两篇笔者分别介绍了在Vuex和Pinia中怎么使用TypeScript以及Vuex和Pinia的区别。今天我们再用TypeScript封装一遍Axios。希望能进一步巩固TypeScript的基础知识。分享一款面试题库web前端...
vue2.5+typescript+vuex+axios 搭建教程
qq_35149546的博客
07-01 243
1.vue2.5+typescript+vuex+axios 搭建教程
typescript项目中封装axios（二）
baidu_41601048的博客
06-24 479
typescript项目中封装axios
vue3 + typescript 封装axios
05-18
在 Vue 3 中使用 TypeScript 封装 axios 需要遵循以下步骤： 1. 安装 axios 和 @vue/cli-plugin-typescript： ``` npm install axios @vue/cli-plugin-typescript ``` 2. 在 Vue 项目的 main.ts 中导入 axios 并将其设置为 Vue.prototype 的一个属性，以便在组件中使用时可以直接访问： ``` import axios from 'axios'; Vue.prototype.$axios = axios; ``` 3. 在需要使用 axios 的组件中导入 axios： ``` import { AxiosInstance } from 'axios'; export default class MyComponent extends Vue { // 声明 $axios 为 AxiosInstance 类型 private $axios!: AxiosInstance; // 在组件中使用 axios async someMethod() { const response = await this.$axios.get('/some/endpoint'); // 处理响应 } } ``` 这样就可以在 Vue 3 项目中使用 TypeScript 封装 axios 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值