TS之静态成员与方法拦截器的使用

1.Ts 类中get与set使用意义

class User {
  name: string;
  age!: number;
  phone: number;
  gender: string;
  constructor(name: string, phone: number, gender: string) {
    this.name = name;
    this.gender = gender;
    this.phone = phone;
  }
  eat() {
    console.log(this.name + '吃饭====!');
  }
  introduceSelf() {
    console.log(
      `我的名字叫${this.name},今年${this.age},我的电话是${this.phone}`
    );
  }
  setAge(val: number) {
    if (val >= 18 && val < 120) {
      this.age = val;
      console.log(this.name + '的年龄是' + this.age);
    } else {
      throw new Error('年龄不合法');
    }
  }
  getAge() {
    return this.age;
  }
}

const user1 = new User('程序员', 123456789, '男');
const user2 = new User('青年', 123456789, '女');
console.log(user1);
user1.setAge(18);
user1.eat();
console.log(user2);

2.TS中静态成员,方法拦截器

class User2 {
  name: string;
  age!: number;
  phone: number;
  gender: string;
  constructor(name: string, phone: number, gender: string) {
    this.name = name;
    this.gender = gender;
    this.phone = phone;
  }
  eat(whose: string, where: string) {
    console.log(`${whose},在${where} 吃饭 = =!`);
  }
  introduceSelf() {
    console.log(
      `我的名字叫${this.name},今年${this.age},我的电话是${this.phone}`
    );
  }
  setAge(val: number) {
    if (val >= 18 && val < 120) {
      this.age = val;
      console.log(this.name + '的年龄是' + this.age);
    } else {
      throw new Error('年龄不合法');
    }
  }
  getAge() {
    return this.age;
  }
}

//处理空格
class StringTrim {
  static trim(str: string): string {
    return str.replace(/\s+/g, '|');
  }
}

const p11 = Object.getOwnPropertyDescriptor(User2.prototype, 'eat');
const p22 = Object.getOwnPropertyDescriptor(User2.prototype, 'eat');
const targetMethod = p11?.value;
p11!.value = function (...args: any[]) {
  console.log('----开始前置处理');
  args = args.map(item=>{
    console.log(item);
    if(typeof item === 'string')return StringTrim.trim(item);
    return item;
  });
  targetMethod.apply(this, args);
  console.log('后置处理成功----');
};
p11?.value('张 三', '悦 来 饭 店');
console.log(p11);
console.log(p22);
console.log(p22 === p11);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue 3中使用TypeScript配置响应拦截器,你需要进行以下步骤: 1. 首先,确保已经安装了axios和@types/axios库。可以使用以下命令进行安装: ``` npm install axios @types/axios ``` 2. 在你的Vue项目中创建一个拦截器文件,比如 `interceptors.ts`。在这个文件中,你可以定义请求和响应的拦截器逻辑。 ```typescript import axios, { AxiosInstance } from 'axios'; // 创建一个Axios实例 const instance: AxiosInstance = axios.create({ baseURL: 'https://api.example.com', // 设置你的API基本URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做一些处理,比如添加请求头 config.headers.common['Authorization'] = 'Bearer token'; return config; }, (error) => { // 处理请求错误 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 在接收响应数据之前做一些处理,比如解析响应数据 return response.data; }, (error) => { // 处理响应错误 return Promise.reject(error); } ); export default instance; ``` 3. 在你的Vue组件中使用拦截器。你可以在需要发送HTTP请求的地方导入 `interceptors.ts` 文件并使用创建的Axios实例进行请求。 ```typescript import axiosInstance from './interceptors'; // 使用拦截器发送请求 axiosInstance.get('/api/data') .then((response) => { console.log(response); }) .catch((error) => { console.error(error); }); ``` 这样,你就可以在Vue 3中使用TypeScript配置响应拦截器了。记得根据你的实际需求修改拦截器逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值