开箱即用的axios封装:Vue3+TS(建议收藏)

简介: Axios多用于处理前端项目的Ajax请求,这里要注意区分Axios和Ajax:Ajax是一种技术统称,Axios是第三方库。在使用的时候,我们可以直接使用Axios来发起请求,也可以封装后采用统一的接口发送请求。在前端项目中,应该大多数人都会选择封装一下Axios,不仅可以节省代码,看起来更简洁;而且可以统一管理请求和响应。本文就以Vue3+Typescript,封装一个”开箱即用“的Axios。

前言

Axios多用于处理前端项目的Ajax请求,这里要注意区分Axios和Ajax:Ajax是一种技术统称,Axios是第三方库。在使用的时候,我们可以直接使用Axios来发起请求,也可以封装后采用统一的接口发送请求。在前端项目中,应该大多数人都会选择封装一下Axios,不仅可以节省代码,看起来更简洁;而且可以统一管理请求和响应。本文就以Vue3+Typescript,封装一个”开箱即用“的Axios。

开始

封装axios的好处我就不多说了,接下来直接上手。

首先我们来梳理一下思路:

  • 想要封装axios,肯定需要安装axios依赖
  • 封装axios,主要是通过拦截器分别处理HTTP请求和响应,并反馈HTTP请求结果
  • 使用案例

安装依赖

安装axios依赖,安装element-plus,用来反馈请求结果

npm i axios,element-plus

封装axios

新建index.ts文件:

  • 需要定义请求返回的数据格式,这个可以和服务端约定好数据格式
  • 需要定义axios的配置信息,用于在创建axios实例时传入
  • 请求拦截器,前端所有的接口请求都会先达到请求拦截器,我们可以在此添加请求头信息
  • 响应拦截器,服务端返回的数据会先达到响应拦截器,我们可以处理服务端的响应信息。如果是报错,就处理常见的报错;如果是成功,就返回数据
  • 封装常用的get、put、post、delete接口方法
import axios, {AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse} from 'axios'
import {ElMessage} from 'element-plus'
// 数据返回的接口
// 定义请求响应参数,不含data
interface Result {
  code: number;
  msg: string
}

// 请求响应参数,包含data
interface ResultData<T = any> extends Result {
  data?: T;
}
const URL: string = ''
enum RequestEnums {
  TIMEOUT = 20000,
  OVERDUE = 600, // 登录失效
  FAIL = 999, // 请求失败
  SUCCESS = 200, // 请求成功
}
const config = {
  // 默认地址
  baseURL: URL as string,
  // 设置超时时间
  timeout: RequestEnums.TIMEOUT as number,
  // 跨域时候允许携带凭证
  withCredentials: true
}

class RequestHttp {
  // 定义成员变量并指定类型
  service: AxiosInstance;
  public constructor(config: AxiosRequestConfig) {
    // 实例化axios
    this.service = axios.create(config);

    /**
     * 请求拦截器
     * 客户端发送请求 -> [请求拦截器] -> 服务器
     * token校验(JWT) : 接受服务器返回的token,存储到vuex/pinia/本地储存当中
     */
    this.service.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        const token = localStorage.getItem('token') || '';
        return {
          ...config,
          headers: {
            'x-access-token': token, // 请求头中携带token信息
          }
        }
      },
      (error: AxiosError) => {
        // 请求报错
        Promise.reject(error)
      }
    )

    /**
     * 响应拦截器
     * 服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
     */
    this.service.interceptors.response.use(
      (response: AxiosResponse) => {
        const {data, config} = response; // 解构
        if (data.code === RequestEnums.OVERDUE) {
          // 登录信息失效,应跳转到登录页面,并清空本地的token
          localStorage.setItem('token', '');
          // router.replace({
          //   path: '/login'
          // })
          return Promise.reject(data);
        }
        // 全局错误信息拦截(防止下载文件得时候返回数据流,没有code,直接报错)
        if (data.code && data.code !== RequestEnums.SUCCESS) {
          ElMessage.error(data); // 此处也可以使用组件提示报错信息
          return Promise.reject(data)
        }
        return data;
      },
      (error: AxiosError) => {
        const {response} = error;
        if (response) {
          this.handleCode(response.status)
        }
        if (!window.navigator.onLine) {
          ElMessage.error('网络连接失败');
          // 可以跳转到错误页面,也可以不做操作
          // return router.replace({
          //   path: '/404'
          // });
        }
      }
    )
  }
  handleCode(code: number):void {
    switch(code) {
      case 401:
        ElMessage.error('登录失败,请重新登录');
        break;
      default:
        ElMessage.error('请求失败');
        break;
    }
  }

  // 常用方法封装
  get<T>(url: string, params?: object): Promise<ResultData<T>> {
    return this.service.get(url, {params});
  }
  post<T>(url: string, params?: object): Promise<ResultData<T>> {
    return this.service.post(url, params);
  }
  put<T>(url: string, params?: object): Promise<ResultData<T>> {
    return this.service.put(url, params);
  }
  delete<T>(url: string, params?: object): Promise<ResultData<T>> {
    return this.service.delete(url, {params});
  }
}

// 导出一个实例对象
export default new RequestHttp(config);

实际使用

在使用时,我们需要在API文档中导入index.ts,会自动创建一个axios实例。我们在同目录下,新建一个login.ts

import axios from './'
namespace Login {
  // 用户登录表单
  export interface LoginReqForm {
    username: string;
    password: string;
  }
  // 登录成功后返回的token
  export interface LoginResData {
    token: string;
  }
}
// 用户登录
export const login = (params: Login.LoginReqForm) => {
    // 返回的数据格式可以和服务端约定
    return axios.post<Login.LoginResData>('/user/login', params);
}

API接口也定义好了,再来一个页面简单试试:

<script setup>
import { reactive } from 'vue';
import {login} from '@/api/login.js'
const loginForm = reactive({
  username: '',
  password: ''
})
const Login = async () => {
  const data = await login(loginForm)
  console.log(data);
}
</script>
<template>
  <input v-model="loginForm.username" />
  <input v-model="loginForm.password" type="password" />
  <button @click="Login">登录</button>
</template>

总结

本文按照TypeScript的风格封装了axios,需要的朋友可以直接拿来使用,对自己来说也是一次学习的收获。封装axios并不难,重点是请求拦截器和响应拦截器,只是要注意ts的类型约束。

相关文章
|
20天前
封装axios的get、post方法
本文介绍了如何封装axios的get和post方法,并展示了具体的代码实现,包括使用axios创建实例、设置请求拦截器以及定义get和post函数。
45 2
|
20天前
|
JavaScript API
Vue3基础(十qi)___安装使用axios
本文介绍了如何在Vue3项目中安装和使用axios进行HTTP请求,包括在main.js中引入axios并挂载到全局属性,以及在组件中通过`getCurrentInstance`获取全局axios实例来发送请求的方法。
22 0
Vue3基础(十qi)___安装使用axios
|
5天前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
15 0
|
2月前
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
20天前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
44 0
|
2月前
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
587 1
|
3月前
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
|
2月前
|
JavaScript 前端开发 C++
使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件
本文详细记录了如何使用Vue-Cli工具创建一个Vue3+TypeScript项目,并整合ElementPlus组件库和Axios等插件,包括项目的创建、配置、启动和插件封装使用等步骤。
36 0
|
4月前
|
JavaScript
vue对axios封装
vue对axios封装
|
3月前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
75 0