需要实现的效果是请求成功之后使用返回的数据不需要抓包看属性，直接获取对象属性开始使用。

开始封装

axios的请求响应拦截

export type apiResult = {

cause: '';

data: T;

message: string;

request: null;

state: number;

total: number;

variables: any;

version: null;

};

const http = (options: any) => new Promise((resolve, reject) => {

// eslint-disable-next-line no-undef

uni.request({

// 官方文档说是默认携带cookie（h5环境），实际体验并非如此

withCredentials: true,

url: options.url,

method: options.method || 'get',

data: options.data || {},

// 请求成功的回调，可以在方法做返回状态码的判断。也可以直接返回resolve ==》success: resolve，fail：reject

success: (res: any) => {

const { data } = res;

data as apiResult;

if (data.state === 200) {

resolve(data);

}

// 这里已经是接口异常了，不需要回调了

// message.error(data?.message);

throw new Error(data?.message);

},

// 请求失败的回调，可以在方法。反馈用户、提示用户，也可以直接返回reject ==》success: resolve，fail：reject

fail: (err) => {

reject(err);

},

});

});

*注意 响应拦截的地方做了状态判断，state==200才会放行否则抛出异常

开始做接口调用

调用的请求函数，注意这个函数是接收泛型的，泛型为成功后data的类型（是响应的data不是http的）

export const request = async ({method = "get", url = "", data = {}, params = {},}) =>

await http({

method,

url,

data,

params,

}) as unknown as apiResult

开始封装具体的接口

这里有两个类型 fetch-type：约定函数调用的传参 dto-type： 约定返回data的类型，这个一般是后端的实体类，转化成type格式需要自己维护。

import {request} from "../axiosConfig";

import {userFetchType} from "./fetch-type";

import {userDtoType} from "./dto-type";

const mockUrl=`http://127.0.0.1:4523/mock/1349724/mock/user`

// 查询帮助文档列表

export const fetchUserById = (data: userFetchType) =>

request({url: mockUrl, method: "post", data});

两个类型

export type userDtoType = {

userName: string,

age: number

}

export type userFetchType = {

userId: string

}

调用方法已截图，结束！

也可以不结束，接着来做个hooks管理请求的状态

import {ref} from "vue";

import {apiResult} from "../api/axiosConfig";

/**

*

* @param fun 异步函数

* @param params 函数参数

* T：回调data的泛型

* T2：param的泛型

*/

export const useRequest = (fun: (data: T2) => Promise>, params: T2) => {

const loading = ref(false)

const data = ref()

const fetch = async () => {

loading.value = true

const res: apiResult = await fun(params) as unknown as apiResult

data.value = res.data

loading.value = false

}

fetch()

return {loading, fetch, data}

}

具体的使用

精彩内容

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：