Vue3+Vite+Ts的Axios企业级封装+本地存储封装_vue ts使用本地存储

前言:实际项目开发中,向后台发请求,vue相关项目,都是用axios,不会用ajax,不会为了ajax单独去引入jquery.

axios官网:http://www.axios-js.com/

第一步:下载依赖axios

  npm i axios --save
  或者
  cnpm i axios --save
  或者
  yarn add axios --save

第二步:在src的目录中新建一个utils的文件夹

 第三步:request.ts中编写代码

import axios, { AxiosInstance } from "axios";
// 因为是ts需要定义类型
import qs from "qs";
class AxiosUtils {
  private http: AxiosInstance;
 
  constructor() {
    this.http = axios.create({
      // 根路径
      baseURL: "http://119.23.246.178:80",
      // 请求延迟时间 如果超过这个时间就会断开拦截
      timeout: 3000,
      // headers: { "X-Custom-Header": "foobar" },
    });
    // 要在constructor里面进行调用 发请求的时候就要开始调用 就要对请求和响应进行拦截
    this.myAddinterceptors();
  }
  // 拦截器
  // 拦截器要自己定义一个方法.实现拦截
  private myAddinterceptors() {
        //封装的是拦截器
        //请求拦截器
        // 一般的作用是 拦截token或者请求头
    // 添加请求拦截器
    this.http.interceptors.request.use(
      function (config) {
        // 在发送请求之前做些什么
        return config;
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );
 
    // 添加响应拦截器
    this.http.interceptors.response.use(
      function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        //对返回的数据进行筛选
        //response.data 只取data中的值,其他的属性不要
        return response.data;
      },
      function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error);
      }
    );
  }
  // 封装一个request方法
  private request(url: string, method: string, data: any = {}) {
    return this.http({
      url,
      method,
      params: method == "get" ? data : "",
      data: method == "post" ? qs.stringify(data) : "",
    });
  }
 
  // public公开的,意思就是让别人用  private自己封装的 需要隐藏起来 不让别人用
  // 封装get方法
  public get(url: string, data: any) {
    return this.request(url, "get", data);
  }
  // 封装post方法
  public post(url: string, data: any) {
    return this.request(url, "post", data);
  }
}
 
// 新建对象
let http = new AxiosUtils();
// 把对象暴露出去
export default http;

理解为什么在constructor中进行调用:

 第四步:在src目录下新建api文件夹,创建模块ts文件

 在模块文件中编辑代码片段:

import request from "../utils/request";
 
export const api_login = (data: any) => {
  return request.post("/users/checkLogin", data);
};

本地存储localStorage和sessionStorage的方法封装

//定义本地存储的接口类
export interface LocalInterFace {
  // 获取
  get<T>(key: string): T;
  // 设置
  set<T>(key: string, value: T): void;
  // 移除
  remove(key: string): void;
  // 判断是否存在
  isKey(key: string): boolean;
  // 清除
  clear(): void;
}
 
// 定义localStorage封装
class LocalUtil implements LocalInterFace {
  // 获取
  get<T>(key: string): T | any {
    // ts类型推断时不能将null赋值给JSON.parse()的参数
    let str = window.localStorage.getItem(key) || "";
    if (str) {
      return JSON.parse(str);
    }
    return str;
  }
  // 设置
  set<T>(key: string, value: T): void {
    window.localStorage.setItem(key, JSON.stringify(value));
  }
  // 移除
  remove(key: string): void {
    window.localStorage.removeItem(key);
  }
  // 判断是否存在
  isKey(key: string): boolean {
    let str = window.localStorage.getItem(key);
    return str ? true : false;
  }
  // 清除
  clear(): void {
    window.localStorage.clear();
  }
}
 
// 定义sessionStorage封装
class SessionUtil implements LocalInterFace {
  // 获取
  get<T>(key: string): T | any {
    // ts类型推断时不能将null赋值给JSON.parse()的参数
    let str = window.sessionStorage.getItem(key) || "";
    if (str) {
      return JSON.parse(str);
    }
    return str;
  }
  // 设置
  set<T>(key: string, value: T): void {
    window.sessionStorage.setItem(key, JSON.stringify(value));
  }
  // 移除
  remove(key: string): void {
    window.sessionStorage.removeItem(key);
  }
  // 判断是否存在
  isKey(key: string): boolean {
    let str = window.sessionStorage.getItem(key);
    return str ? true : false;
  }
  // 清除
  clear(): void {
    window.sessionStorage.clear();
  }
}
 
// 创建需要导出的对象
const $local = new LocalUtil();
const $session = new SessionUtil();
// 以对象的形式导出
export { $local, $session };