vue封装axios请求

在vue项目中我们发送请求一般是使用axios 我们可以封装axios来避免冗余代码

首先引入axios

shell 复制代码

npm install axios

创建环境配置文件

js 复制代码

NODE_ENV = 'development'
VITE_APP_TITLE = 'dev'
VITE_APP_BASE_API = '/test'
VITE_SERVE = "http://127.0.0.1"

上面是创建dev配置文件也可以定义多个自己配置即可

创建一个request的文件夹
index.ts（配置axios）

ts 复制代码

import axios from "axios";
import router from "@/router";

import {ElMessage} from "element-plus";

declare module 'axios' {
    interface AxiosInstance {
        (config: AxiosRequestConfig): Promise<any>
    }
}
// 创建一个 axios 实例
const service = axios.create({
    baseURL: import.meta.env.VITE_SERVE,
    timeout: 60000, // 请求超时时间毫秒
});

//请求拦截器
service.interceptors.request.use((config) => {
    // config.headers("token", localStorage.getItem("token"));
    config.headers.token = localStorage.getItem("token");
    //返回配置对象
    return config;
});

//响应拦截器 我的项目code 0代表成功 401 -1 1代表登录状态失效  需要跳转到登录页面
service.interceptors.response.use((response) => {
    const {code, msg} = response.data;
    if (code !== 0) {
        ElMessage({
            message: msg,
            type: "error",
        });
    }
    if (code == 401 || code == -1 || code == 1) {
        setTimeout(async () => {
            // 登录失效
            localStorage.clear();
            await router.push("/login");
        }, 2000);
    }
    //简化数据
    return response.data;
}, (error) => {
    console.log("异常", error);
},)


export default service;

method.ts（封装请求）

ts 复制代码

import service from "@/request/index";
// 地址
let prefix = import.meta.env.VITE_APP_BASE_API;

/**
 * get请求
 * @param url 请求地址
 * @param data 请求参数
 * @param api 特殊的请求代理
 * @returns
 */
export function get(url: string, data: any = {}, api?: string) {
  let baseUrl = prefix;
  let params = [];
  for (const item in data) {
    params.push(`${item}=${data[item]}`);
  }
  if (api) {
    baseUrl = api;
  }
  url =
    baseUrl + url + (Object.keys(data).length ? "?" : "") + params.join("&");
  return service({
    url,
    method: "GET",
    data,
  });
}
/**
 * post请求
 * @param url 请求地址
 * @param data 请求参数
 * @returns
 */
export function post(url: string, data = {}) {
  url = prefix + url;
  return service({
    url,
    method: "POST",
    data,
  });
}

创建api文件夹（汇总请求）
api.ts

ts 复制代码

import {get, post} from "@/request/method";

/** 获取验证码 **/
export const API_Login_GetSmsCode = (phone: any) => get(`/sms/send?phone=${phone}`);
/** 验证码登录 **/
export const API_Login = (params: any) => post("/user/login", params);

上面演示了两种请求方式 get和post的使用方法

在vue页面中直接导入

ts 复制代码

import {API_Login, API_Login_GetSmsCode} from "@/api/api";

// 登录表单数据
const loginForm = reactive({
  // 验证码登录字段
  smsCode: "",
  userPhone: ""
})

// 发送验证码
async function smsSend() {
  if (loginForm.userPhone.length <= 0) {
    ElMessage.error("请输入手机号")
    return
  }
  const {code} = await API_Login_GetSmsCode(loginForm.userPhone)
  if (code === 0) {
    ElMessage.success("发送成功")
    startCountdown();
  }
}

// 登录请求
async function loginReq() {
  const {code, data} = await API_Login(loginData)
  if (code === 0) {
      ElMessage.success("登录成功")
      localStorage.setItem("token", data.token)
      localStorage.setItem("userName", data.userName)
      await $router.push('/home')
  }
}