木灵鱼儿

2023年02月08日阅读：226

最后更新：2023/02/08/ 0:43:43

封装uni.request api为类似axios的用法

前言

uniapp的请求都是通过uni.request的api实现的，但是这个api和前端常用的axios库用法上有着太多的不同了，移植起来非常痛苦，所以萌生了自己造一个轮子的想法，由于本人技术菜鸡，只能浅浅的仿照一个了。

实际上本人喜欢axios的config的方式调用请求，如下：

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
});

所以大体上都是围绕这种用法展开工作的。

首先说下使用上的注意事项：

get请求不支持使用data字段，用了估计也会被忽略，get请求请务必使用params字段传参，参考axios的params
create方法创建实例的时候，支持的默认配置只有三个字段：baseURL、timeout、headers
为了实现promise返回结果，不允许任何调用的请求配置中存在：success、fail、complete回调函数字段，本人通过ts美滋滋的屏蔽了，你用了肯定会报错警告。
请求前的拦截器只有成功的拦截器，因为axios中的请求前错误拦截器测试根本没有可以触发的地方，所以直接割了这个。
只有响应后的拦截器允许throw抛出错误和Promise.reject()。

基本就这样了，具体可以看看代码，都有注释（优秀作风）

使用

这里是业务层的封装，创建MyAxios实例，配置默认数据baseUrl这些，添加拦截器，请求前对配置对象做特殊处理，请求后解包，报错toast提示。

由于class类的方式，不能将类直接作为函数调用，所以最后提取了api.request方法单独导出了

import MyAxios, { METHODS } from "./myAxios";


/** 第一层数据类型 */
export interface ResponseData {
  code: Number;
  data: Object;
  msg: string;
}

const api = MyAxios.create({
  baseURL: "https://xxx",
  timeout: 1000,
});

/** 请求前拦截器 */
api.useRequestInterceptor((config) => {
  return config;
});

/** 请求后拦截器 */
api.useResponseInterceptor<ResponseData>(
  (res) => {
    //如果code不等于1则说明有错误
    const { code, msg } = res;
    if (code !== 1) {
      uni.showToast({
        title: `网络请求失败`,
        icon: "error",
      });
      return Promise.reject(new Error(msg));
    }
    //解包处理
    const data = res.data;
    return data;
  },
  (error) => {
    uni.showToast({
      title: `网络请求失败`,
      icon: "error",
    });
    return error;
  }
);

/** 提取request请求函数 */
const request = api.request.bind(api);

export { request, METHODS };
export default api;

api层的使用：

import { request, METHODS } from "@/request";

/** 测试接口 */
export function test() {
  return request({
    url: "/test",
    method: METHODS.GET,
    params: {
      name: "我是测试接口",
    },
  });
}

request方法支持泛型，传入一个泛型后就可以推导出本次请求结果的数据类型，方便ts使用了。

import { request, METHODS } from "@/request";

/** 测试接口 */
export function test() {
  return request<string>({  //这里的string就是响应拦截器中res.data解包之后的值了
    url: "/test",
    method: METHODS.GET,
    params: {
      name: "我是测试接口",
    },
  });
}

具体的业务使用：

import { test } from "@/apis/test";

test()
    .then((res) => {
      console.log(res);
    })
    .catch((error) => {
      console.log(error);
    });

MyAxios封装


/** 请求方法常量 */
export enum METHODS {
  "OPTIONS" = "OPTIONS",
  "GET" = "GET",
  "HEAD" = "HEAD",
  "POST" = "POST",
  "PUT" = "PUT",
  "DELETE" = "DELETE",
  "TRACE" = "TRACE",
  "CONNECT" = "CONNECT",
}

/** 头信息 */
export interface Headers {
  [key: string]: string | number | boolean | undefined | null;
}

/** 实例化的配置 */
export interface AxiosConfig {
  baseURL?: string;
  timeout?: number;
  headers?: Headers;
}

/** 默认配置 */
const defaultConfig: AxiosConfig = {
  baseURL: "",
  timeout: 60000,
  headers: {},
};

/** 定制的请求参数 */
export interface RequestOptions extends Omit<UniNamespace.RequestOptions, "success" | "fail" | "complete"> {}

/** 已知请求类型的配置 */
export interface KnownConfig extends Omit<RequestOptions, "method"> {}

/** get请求类型配置 */
export interface GetConfig extends Omit<KnownConfig, "data"> {
  params?: Record<string, any>;
}

/** post请求类型配置 */
export interface PostConfig extends KnownConfig {
  params?: Record<string, any>;
}

/** request请求类型配置 */
export interface RequestConfig extends RequestOptions {
  params?: Record<string, any>;
}

/** 错误对象 */
export interface AxiosError extends Error {
  options?: RequestOptions;
}

/** 请求前拦截器 */
export type RequestInterceptorFn = (config: RequestOptions) => RequestOptions;
export type RequestInterceptorArray = Array<RequestInterceptorFn>;
/** 请求成功拦截器 */
export type ResponseSuccessInterceptorFn<T = any> = (result: T) => any;
export type ResponseSuccessInterceptorArray<T> = Array<ResponseSuccessInterceptorFn<T>>;
/** 请求失败拦截器 */
export type ResponseInterceptorFailFn = (error: AxiosError | Error) => AxiosError | Error;
export type ResponseInterceptorFailArray = Array<ResponseInterceptorFailFn>;

class Axios {
  /** createOptions */
  private createOptions: AxiosConfig;
  /** 取消请求函数存储器 */
  private cancelTokenMap: Map<string, Function> = new Map();
  /** 请求前拦截器 */
  private requestInterceptors: RequestInterceptorArray = [];
  /** 请求后成功的拦截器 */
  private responseSuccessInterceptors: ResponseSuccessInterceptorArray<any> = [];
  /** 请求后失败的拦截器 */
  private responseFailInterceptors: ResponseInterceptorFailArray = [];

  constructor(options: AxiosConfig = defaultConfig) {
    const { baseURL, timeout, headers } = options;
    this.createOptions = {
      baseURL: baseURL ?? defaultConfig.baseURL,
      timeout: timeout ?? defaultConfig.timeout,
      headers: headers ?? defaultConfig.headers,
    };
  }

  /** 静态创建实例方法 */
  public static create(options?: AxiosConfig): Axios {
    return new Axios(options);
  }

  /** get请求 */
  public get<T = any>(options: GetConfig): Promise<T> {
    const getOptions: KnownConfig = { ...options };
    if (options.params) {
      getOptions.data = options.params;
      Reflect.deleteProperty(getOptions, "params");
    }
    const requestConfig = this.mergeDefaultConfig(getOptions);
    return this._request<T>({ method: METHODS.GET, ...requestConfig });
  }

  /** post请求 */
  public post<T = any>(options: PostConfig): Promise<T> {
    let postOptions: KnownConfig = { ...options };
    //生成参数字符串
    const params = options.params;
    let paramsStr = "";
    if (params) {
      Object.keys(params)
        .sort((a, b) => a.localeCompare(b))
        .forEach((key) => {
          paramsStr += `${key}=${params[key]}&`;
        });
      paramsStr = paramsStr.replace(/&$/, "");
    }
    //拼接参数字符串
    if (postOptions.url.includes("?")) {
      postOptions.url += `&${paramsStr}`;
    } else {
      postOptions.url += `?${paramsStr}`;
    }
    const requestConfig = this.mergeDefaultConfig(postOptions);
    return this._request<T>({ method: METHODS.POST, ...requestConfig });
  }

  /** 自动判断get和post请求的请求方法 */
  public request<T = any>(options: RequestConfig): Promise<T> {
    let { method } = options;
    if (!method) method = METHODS.GET;

    switch (method) {
      case METHODS.GET:
        return this.get<T>(options);
      case METHODS.POST:
        return this.post<T>(options);
      default:
        return Promise.reject(new Error("不支持的请求方法"));
    }
  }

  /** 获取uni的请求并类型转换为Promise */
  private _request<T = any>(options: RequestConfig): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      //请求前拦截器
      let requestConfig = options;
      this.requestInterceptors.forEach((interceptor) => {
        requestConfig = interceptor(requestConfig);
      });
      const requestTask = uni.request({
        ...requestConfig,
        success: async (res) => {
          try {
            const { statusCode } = res;
            //错误处理
            if (statusCode !== 200) {
              let msg = "请求失败";
              const data = res.data as { msg: string };
              if (typeof data.msg === "string") msg = data.msg;
              let error: AxiosError = this.createError(msg, options);
              //删除取消函数
              this.cancelTokenMap.delete(options.url);
              //请求失败拦截器
              for (let i = 0, len = this.responseFailInterceptors.length; i < len; i++) {
                error = this.responseFailInterceptors[i](error);
              }
              return reject(error);
            }
            //删除取消函数
            this.cancelTokenMap.delete(options.url);
            //请求成功拦截器
            let resultData = res.data;
            for (let i = 0, len = this.responseSuccessInterceptors.length; i < len; i++) {
              resultData = await this.responseSuccessInterceptors[i](resultData);
            }
            return resolve(resultData as T);
          } catch (err: any) {
            let msg = "请求失败";
            if (typeof err.errMsg === "string") msg = err.errMsg;
            const error: AxiosError = this.createError(msg, options);
            //删除取消函数
            this.cancelTokenMap.delete(options.url);
            //请求失败拦截器
            for (let i = 0, len = this.responseFailInterceptors.length; i < len; i++) {
              err = this.responseFailInterceptors[i](err);
            }
            return reject(err);
          }
        },
        fail: (err) => {
          let msg = "请求失败";
          if (typeof err.errMsg === "string") msg = err.errMsg;
          let error: AxiosError = this.createError(msg, options);
          //删除取消函数
          this.cancelTokenMap.delete(options.url);
          //请求失败拦截器
          for (let i = 0, len = this.responseFailInterceptors.length; i < len; i++) {
            error = this.responseFailInterceptors[i](error);
          }
          return reject(error);
        },
      });
      //存储取消函数
      this.cancelTokenMap.set(options.url, requestTask.abort.bind(requestTask));
    });
  }

  /** 获取用户配置和默认配置的合并后的配置对象 */
  private mergeDefaultConfig(options: KnownConfig): RequestOptions {
    const { baseURL, timeout, headers } = this.createOptions;
    const url = `${baseURL}${options.url ?? ""}`;
    const mergeOptions = { timeout, ...options };
    Reflect.deleteProperty(mergeOptions, "url");
    mergeOptions.url = url;
    const oh = options.header;

    if (oh) {
      mergeOptions.header = { ...headers, ...oh };
    } else {
      mergeOptions.header = headers || {};
    }

    return mergeOptions;
  }

  /** 创建错误对象 */
  private createError(msg: string, options: RequestOptions): AxiosError {
    const error: AxiosError = new Error(msg);
    error.options = options;
    return error;
  }

  /** 通过url获取取消请求函数 */
  public getRequestAbort(url: string): Function | undefined {
    return this.cancelTokenMap.get(url);
  }

  /** 注册请求前的拦截器 */
  public useRequestInterceptor(fn: RequestInterceptorFn): void {
    this.requestInterceptors.push(fn);
  }

  /** 注册请求后的拦截器 */
  public useResponseInterceptor<T>(successFn: ResponseSuccessInterceptorFn<T>, failFn?: ResponseInterceptorFailFn): void {
    this.responseSuccessInterceptors.push(successFn);
    failFn && this.responseFailInterceptors.push(failFn);
  }
}

export default Axios;

取消请求

其实我把取消请求功能也加上了，通过实例api.getRequestAbort(url)方法，但是个人感觉不是很好使，这个url是一个完整链接哦，是包含baseUrl和链接参数的，因为实在想不到啥好办法去区分了。

如果你需要的话，可以自行使用，getRequestAbort得到的就是abort取消请求函数，运行它即可。

需要注意的是，如果这个请求已经完成了，success或者fail，那个getRequestAbort就获取不到了，因为我把abort清理了。

文章分类

文章标签

木灵鱼儿

2023年02月08日

发布了 718 篇文章获得点赞 4获得阅读 226

版权申明

本文系作者 @木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

关于作者

木灵鱼儿

以前觉得活下去很难，现在发现活的好才难！

站点职位博主

获得点赞 4

文章被阅读 226

利用原生css实现hash哈希定位跳转偏移量处理利用原生css实现hash哈希定位跳转偏移量处理

ts实战：给没有类型声明的第三方库编写一个类型声明文件ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver

typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理

ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类

木灵鱼儿

封装uni.request api为类似axios的用法

前言

使用

MyAxios封装

取消请求

木灵鱼儿

版权申明

关于作者

木灵鱼儿

相关文章

目录树

木灵鱼儿

封装uni.request api为类似axios的用法

前言

使用

MyAxios封装

取消请求

木灵鱼儿

版权申明

相关推荐

nuxt 一文读懂@nuxtjs/axios的用法

koa教程2 HttpBearerAuth 传递token

nuxt 中axios反代的用法

vue项目中关于axios取消请求的解决方案

axios 速读

vue路由切换取消上一个路由未完成的axios请求

如何取消axios请求以及取消后错误处理的思路

精华 axios 修改http协议和转formData对象

axios error对象解构

axios 拦截器 登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来

关于作者

木灵鱼儿

相关文章

目录树

账密登录

axios 拦截器登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来