04_装饰器封装axios_get请求

简介: 04_装饰器封装axios_get请求

借助方法装饰器,我们可以获取到方法对应的函数,从而在不直接调用方法的情况下调用方法(对不起,我找不到更好的词了……)

完整代码:

import axios from 'axios'
// 装饰器工厂模式,允许用户传入自己的URL
const get = (url: string): MethodDecorator => {
  // 返回方法装饰器,第三个参数即是函数的定义
  return (target: Object, propertyKey: string | symbol, description: any) => {
    axios.get(url)
      .then((res) => {
        // 获取并调用函数
        const fnc = description.value
        fnc(res, {
          status: 200,
          success: true,
        })
      })
      .catch((e) => {
        const fnc = description.value
        fnc(e, {
          status: 500,
          success: false,
        })
      })
  }
}
class Controler {
  // 装饰器语法
  @get('https://api.apiopen.top/api/getHaoKanVideo')
  getList(res: any, sta: any) {
    console.log(res.data.result.list)
    console.log(sta)
  }
}

如上图所示,此时运行程序即可在控制台输出接口返回内容

目录
相关文章
|
6天前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
14 2
|
6天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
14 0
|
6天前
|
前端开发 API
Axios请求成功和失败时分别执行哪个函数?
Axios请求成功和失败时分别执行哪个函数?
26 1
|
6天前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
10 0
|
6天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
15 1
|
6天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
34 0
|
6天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
6天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
6天前
axios封装和配置
axios封装和配置
21 0