HbuilderX数据请求TS封装

第一步需要创建utils文件夹request.ts文件

// 添加拦截器
// 拦截uni.request()请求
// https://x.dscmall.cn/api/goods/type_list?page=1&size=10&type=is_best
let baseURL = "https://x.dscmall.cn/api"

// 添加拦截器

let optionsInterceptor = {
	invoke(args : UniApp.RequestOptions) {
		// request 触发前拼接 url 
		args.url = baseURL + args.url
	}
	// 添加token信息
}

uni.addInterceptor("request", optionsInterceptor)

// 定义一个类型type
type Data<T>={
	status:string | number,
	msg:string,
	result:T
}

export const request=<T>(options:UniApp.RequestOptions)=>{
	return new Promise<Data<T>>((resolve,reject)=>{
		uni.request({
			...options,
			success(res){
				resolve(res.data as Data<T>)
			},
			fail(err){
				reject(err)
			}
		})
	})
}

第二步：在src目录下面新建api文件夹home.ts文件

import {request} from "../utils/request.ts"

interface IHomeData {
	page:string | number,
	size:string | number,
	type:string | number
}
// 导出方法
// https://x.dscmall.cn/api/goods/type_list?page=1&size=10&type=is_best
export const HomeListApi=(data:IHomeData)=>{
	return request({
		url:"/goods/type_list",
		method:"get",
		data
	})
}

 第三步：在所需文件夹里请求数据

 第四步：渲染