H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】如何给class中的方法写函数接口

我封装来一个类,里面有get(), post(), put(), delete()四个方法,且每个方法都有很多参数

interface fetchParam {
  (
    url: string,
    params?: string | object | [],
    alwaysBack?: boolean,
    options?: object,
    resolveResult?: boolean,
  ): {}
}

class Request {
  constructor() {}

  fetchApi(url, method, params, alwaysBack, options, resolveResult) {
     return new Promise((res, rej) => { 
       // do somthing
     })
  }

  get(url, params, alwaysBack, options, resolveResult) {
    return this.fetchApi(url, 'get', params, alwaysBack, options, resolveResult)
  }

  post(url, params, alwaysBack, options, resolveResult) {
    return this.fetchApi(url, 'post', params, alwaysBack, options, resolveResult)
  }

  put(url, params, alwaysBack, options, resolveResult) {
    return this.fetchApi(url, 'put', params, alwaysBack, options, resolveResult)
  }

  delete(url, params, alwaysBack, options, resolveResult) {
    return this.fetchApi(url, 'delete', params, alwaysBack, options, resolveResult)
  }


}

我并不想用这种方式约束函数参数, 因为这样会很繁琐

get(url: string, params?: string | object | [], alwaysBack?: boolean) {
    // do somthing
}

所以有没有什么方法只用一个接口定义来定义class中的这四个方法。

回答:

定义类型本来就是个繁琐的事情,如果你觉得这么多参数太复杂,也可以采用对象参数啊,比如

interface IFetchParams {
    url: string;
    params?: string | object | [];
    alwaysBack?: boolean;
    options?: object;
    resolveResult?: boolean;
}

// 定义 GET
get(args: IFetchParams) { ... }

不过这种方式会改变调用接口(函数签名)

还有一种变通的方法,定义一个函数类型,然后把 get 等定义成这个函数类型的成员

type FetchType = (
    url: string,
    params?: string | object | [],
    alwaysBack?: boolean,
    options?: object,
    resolveResult?: boolean,
) => {};

// 定义 GET
class xxxxxx {
    get: FetchType = (...args: any[]) => {
        const [url, ...rest] = args;
        return this.fetchApi(url, "get", ...rest);
    }
}

这个定义在 this.fetchApi(url, "get", ...rest) 这里会出错,因为 fetchApi 没有兼容的定义,所以要改,把 fetchApi 定义成 fetchApi(...args: any[])。这种方式显然对外部调用不友好(不能提示参数),所以 fetchApi 要定义成 protected 或者 private 的,内部调用,同时通过重载定义一个友好的接口

    protected fetchApi(url, method, params, alwaysBack, options, resolveResult);
    protected fetchApi(...args: any[]);
    protected fetchApi(...args: any[]) {
        const [url, method, params, alwaysBack, options, resolveResult] = args;
        return new Promise((res, rej) => {
            // do somthing
        });
    }

想了想,最后还是补一句,用类型系统,就不要怕定义麻烦!!!

回答:

class Request implements XXX

回答:

把 所有参数 封装到一个对象里面,直接传一个对象过去,用到那个参数就.get哪个参数

本文地址:H5W3 » 【前端问题精选】如何给class中的方法写函数接口

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址