前端请求Axios+TS封装

最新推荐文章于 2025-03-07 16:54:14 发布

原创最新推荐文章于 2025-03-07 16:54:14 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue项目专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Axios库进行HTTP请求的安装和封装，创建了一个名为HttpRequest的类来管理默认配置、拦截器，并在Vue应用中通过Pinia状态管理库进行调用。

axios

安装

pnpm i axios

封装axios.request方法

// utils/http.ts
import axios,{type AxiosInstance,type AxiosRequestConfig} from 'axios';

class HttpRequest {
   private defaults: AxiosRequestConfig;
   private instance: AxiosInstance = {} as AxiosInstance;;
  constructor(options:AxiosRequestConfig){
    this.defaults = {
      baseURL: ''
    }
    this.defaults = Object.assign(this.defaults, options);
  }
  interceptors(install:AxiosInstance){
    install.interceptors.request.use(
      config => {
        let token = localStorage.getItem('token');
        if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
          config.headers!.authorization = `token ${token}`;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      }
    );
    install.interceptors.response.use(
      res => {
        const { data, status } = res;
        return data;
      },
      err => {
        return Promise.reject(err);
      }
    );
  }
  request(options:AxiosRequestConfig){
    options = Object.assign(this.defaults, options)
    const instance = axios.create(options)
    this.interceptors(this.instance);
    return this.instance
  }
}

const request = new HttpRequest({
  baseURL: '/api'
});
export default request;

对请求进行封装

// api/user.ts
import http from '@/utils/http'
export const getUserInfo = () => {
  return http.request({
    url: '/getUserInfo',
    method: 'get'
  })
}

调用

import { getUserInfo } from '@/api/user'
import { defineStore } from 'pinia'
import {ref} from 'vue'
export const useUserStore = defineStore('user', ()=>{
    const userInfo = getUserInfo()
})