vue3 + vite 进行axios请求封装及接口API的统一管理

18,950 阅读3分钟

一、前言

这篇文章跟vite关系不大,下篇写环境变量配置的时候就是vite相关了,今天这里主要讲一下在vue3中axios的实战用法以及Api的统一管理,手把手教学望各位在这里能碰擦出灵感的火花,放飞五彩的思绪。

二、目录结构

image.png

src目录下新建api文件,

  • api.ts 进行接口API的统一管理
  • axios.ts 封装请求配置拦截器
  • status.ts 管理接口返回状态码

三、axios.ts

代码内逐行解释

import axios from 'axios';
import { showMessage } from "./status";   // 引入状态码文件
import { ElMessage } from 'element-plus'  // 引入el 提示框,这个项目里用什么组件库这里引什么

// 设置接口超时时间
axios.defaults.timeout = 60000;

// 请求地址,这里是动态赋值的的环境变量,下一篇会细讲,这里跳过
// @ts-ignore
axios.defaults.baseURL = import.meta.env.VITE_API_DOMAIN;   

//http request 拦截器
axios.interceptors.request.use(
  config => {
  // 配置请求头
    config.headers = {
      //'Content-Type':'application/x-www-form-urlencoded',   // 传参方式表单
      'Content-Type':'application/json;charset=UTF-8',        // 传参方式json
      'token':'80c483d59ca86ad0393cf8a98416e2a1'              // 这里自定义配置,这里传的是token
    };
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    const {response} = error;
    if (response) {
      // 请求已发出,但是不在2xx的范围
      showMessage(response.status);           // 传入响应码,匹配响应码对应信息
      return Promise.reject(response.data);
    } else {
      ElMessage.warning('网络连接异常,请稍后再试!');
    }
  }
);

// 封装 GET POST 请求并导出
export function request(url='',params={},type='POST'){
//设置 url params type 的默认值
return new Promise((resolve,reject)=>{
  let promise
  if( type.toUpperCase()==='GET' ){
    promise = axios({
      url,
      params
    })
  }else if( type.toUpperCase()=== 'POST' ){
    promise = axios({
      method:'POST',
      url,
      data:params
    })
  }
  //处理返回
  promise.then(res=>{
    resolve(res)
  }).catch(err=>{
    reject(err)
  })
})
}

四、status.ts

不解释了,粘走直接用

export const showMessage = (status:number|string) : string => {
    let message:string = "";
    switch (status) {
        case 400:
            message = "请求错误(400)";
            break;
        case 401:
            message = "未授权,请重新登录(401)";
            break;
        case 403:
            message = "拒绝访问(403)";
            break;
        case 404:
            message = "请求出错(404)";
            break;
        case 408:
            message = "请求超时(408)";
            break;
        case 500:
            message = "服务器错误(500)";
            break;
        case 501:
            message = "服务未实现(501)";
            break;
        case 502:
            message = "网络错误(502)";
            break;
        case 503:
            message = "服务不可用(503)";
            break;
        case 504:
            message = "网络超时(504)";
            break;
        case 505:
            message = "HTTP版本不受支持(505)";
            break;
        default:
            message = `连接出错(${status})!`;
    }
    return `${message},请检查网络或联系管理员!`;
};

五、api.ts

引入axios导出的request,按功能模块进行接口的管理

import { request } from './axios'

/**
 * @description -封装User类型的接口方法
 */
export class UserService {       // 模块一
    /**
     * @description 用户登录
     * @param {string} username - 用户名
     * @return {HttpResponse} result
     */
    static async login1(params) {   // 接口一
        return request('/login',params, 'post')
    }
    static async login2(params) {   // 接口二
        return request('/login',params, 'post')
    }
    static async login3(params) {   // 接口三
        return request('/login',params, 'post')
    }
}

export class landRelevant {     // 模块二
    /**
     * @description 获取地列表
     * @return {HttpResponse} result
     */
    static async landList(params) {
        return request('/land_list_info',params, 'get')
    }
}

六、应用

无需在main.ts内引入,需要什么模块的接口在相应页面引入改模块即可

<script setup>
import { onMounted } from "vue";
import {UserService} from '/src/api/api.ts'

onMounted(()=>{
  login1()
  login2()
})

const login1 = async () => {
  const loginParams = {
    username: 'test',
    password: 'test',
  }
  const res = await UserService.login1(loginParams)
  // console.log(res)
}

const login2 = () => {
  const loginParams = {
    username: 'test',
    password: 'test',
  }
  UserService.login2(loginParams).then((res)=>{
    // console.log(res)
  })
}
</script>

七、结束语

今天在配置项目时在网上搜寻了众多vue3 axios的相关文章,发现没有完全符合本人需求的内容,所以最后集百家之长整合了这么一篇文章,望对各位有所帮助