vue3 ts 请求封装后端接口

一 首页-广告区域-小程序

首页-广告区域-小程序

GET

/home/banner

1.1 请求封装 首页-广告区域

home.ts

export const getHomeBannerApi = (distributionSite = 1) => {
  return http<BannerItem[]>({
    method: 'GET',
    url: '/home/banner',
    data: {
      distributionSite,
    },
  })
}

函数定义：

• getHomeBannerApi 是一个导出的常量函数。
• 它接收一个可选参数 distributionSite，默认值为 1。

HTTP 请求配置：

• method: ‘GET’：指定请求方法为 GET。

• url: ‘/home/banner’：请求的 URL。

• data: { distributionSite }：请求的参数。

返回值：

• 函数返回 http<BannerItem[]>(…) 的结果。

{
  "msg": "string",
  "result": [
    {
      "id": "string",
      "imgUrl": "string",
      "hrefUrl": "string",
      "type": 0
    }
  ]
}

2 定义返回值类型

/** 首页-广告区域数据类型 */
export type BannerItem = {
  /** 跳转链接 */
  hrefUrl : string
  /** id */
  id : string
  /** 图片链接 */
  imgUrl : string
  /** 跳转类型 */
  type : number
}

3 方法调用

const bannerList = ref<BannerItem[]>([])
  const getBannerData = () => {
    getHomeBannerApi().then((res) => {
      bannerList.value = res.result
    })
  }

二 猜你喜欢-小程序

1 封装请求

export const getGuessListApi=((data?:PageParams)=>{
  return http<PageResult<GuessItem[]>>({
    method:"GET",
    url:'/home/goods/guessLike',
    data
  })
})

函数定义：

• getGuessListApi 是一个导出的常量函数。
• 它接收一个可选参数 data，类型为 PageParams。

HTTP 请求配置：

• method: ‘GET’：指定请求方法为 GET。

• url: ‘/home/goods/guessLike’：请求的 URL。

• data：请求的参数（可选）。

返回值：

• 函数返回 http<PageResult<GuessItem[]>>(…) 的结果。
• http 是一个泛型函数，<PageResult<GuessItem[]>> 表示期望的响应数据类型是一个分页结果，其中 data 字段是 GuessItem 数组。

2 返回值类型定义

/** 通用分页结果类型 */
export type PageResult<T> = {
  /** 列表数据 */
  items: T[]
  /** 总条数 */
  counts: number
  /** 当前页数 */
  page: number
  /** 总页数 */
  pages: number
  /** 每页条数 */
  pageSize: number
}

• PageResult 是一个泛型类型，T 表示列表中每一项的数据类型。
• 例如，如果 T 是 GuessItem，那么 items 的类型就是 GuessItem[]。

3 请求值类型定义

export type PageParams = {
  /** 页码：默认值为 1 */
  page?: number
  /** 页大小：默认值为 10 */
  pageSize?: number
}

4 方法调用

  const guessList = ref<GuressItem[]>([]);

  // 分页参数
  const pageParams : Required<PageParams> = {
    page: 1,
    pageSize: 10
  }
  const flag = ref(false)
  const getGuessLike = (() => {
    if (flag.value) {
      return uni.showToast({
        icon: 'none',
        title: "没有更多数据了"
      })
    }
    getGuessListApi(pageParams).then(res => {
      guessList.value = guessList.value.concat(res.result.items)
      if (pageParams.page < res.result.pages) {
        pageParams.page++
      } else {
        flag.value = true
      }
    })
  })

三 商品详情

1 请求封装

/**
 * 商品详情
 * @param id 商品id
 */
export const getGoodsByIdAPI = (id: string) => {
  return http<GoodsResult>({
    method: 'GET',
    url: '/goods',
    data: { id },
  })
}

2 返回值类型定义

import type { GoodsItem } from './global'

/** 商品信息 */
export type GoodsResult = {
  /** id */
  id: string
  /** 商品名称 */
  name: string
  /** 商品描述 */
  desc: string
  /** 当前价格 */
  price: number
  /** 原价 */
  oldPrice: number
  /** 商品详情: 包含详情属性 + 详情图片 */
  details: Details
  /** 主图图片集合[ 主图图片链接 ] */
  mainPictures: string[]
  /** 同类商品[ 商品信息 ] */
  similarProducts: GoodsItem[]
  /** sku集合[ sku信息 ] */
  skus: SkuItem[]
  /** 可选规格集合备注[ 可选规格信息 ] */
  specs: SpecItem[]
  /** 用户地址列表[ 地址信息 ] */
  userAddresses: AddressItem[]
}

/** 商品详情: 包含详情属性 + 详情图片 */
export type Details = {
  /** 商品属性集合[ 属性信息 ] */
  properties: DetailsPropertyItem[]
  /** 商品详情图片集合[ 图片链接 ] */
  pictures: string[]
}

/** 属性信息 */
export type DetailsPropertyItem = {
  /** 属性名称 */
  name: string
  /** 属性值 */
  value: string
}

/** sku信息 */
export type SkuItem = {
  /** id */
  id: string
  /** 库存 */
  inventory: number
  /** 原价 */
  oldPrice: number
  /** sku图片 */
  picture: string
  /** 当前价格 */
  price: number
  /** sku编码 */
  skuCode: string
  /** 规格集合[ 规格信息 ] */
  specs: SkuSpecItem[]
}

/** 规格信息 */
export type SkuSpecItem = {
  /** 规格名称 */
  name: string
  /** 可选值名称 */
  valueName: string
}

/** 可选规格信息 */
export type SpecItem = {
  /** 规格名称 */
  name: string
  /** 可选值集合[ 可选值信息 ] */
  values: SpecValueItem[]
}

/** 可选值信息 */
export type SpecValueItem = {
  /** 是否可售 */
  available: boolean
  /** 可选值备注 */
  desc: string
  /** 可选值名称 */
  name: string
  /** 可选值图片链接 */
  picture: string
}

/** 地址信息 */
export type AddressItem = {
  /** 收货人姓名 */
  receiver: string
  /** 联系方式 */
  contact: string
  /** 省份编码 */
  provinceCode: string
  /** 城市编码 */
  cityCode: string
  /** 区/县编码 */
  countyCode: string
  /** 详细地址 */
  address: string
  /** 默认地址，1为是，0为否 */
  isDefault: number
  /** 收货地址 id */
  id: string
  /** 省市区 */
  fullLocation: string
}

3 方法调用

  const goods = ref<GoodsResult>()
  const getGoodsInfo = (() => {
    getGoodsByIdAPI(query.id).then(res => {
      goods.value = res.result
        })
  })

四 小程序登录

1 请求封装

export const postLoginWxMinAPI = (data:LoginParams) => {
  return http<LoginResult>({
    method: 'POST',
    url: '/login/wxMin',
    data,
  })
}

2 定义请求值类型

/**
 * 小程序登录
 * @param data 请求参数
 */
type LoginParams={
  code:string,
  encryptedData:string,
  iv:string
}

3 定义返回值类型

//通用的用户信息
type BaseProfile={
  /** 用户ID */
  id: number
  /** 头像  */
  avatar: string
  /** 账户名  */
  account: string
  /** 昵称 */
  nickname?: string
}


/** 小程序登录 登录用户信息 */
export type LoginResult = BaseProfile & {
  /** 手机号 */
  mobile: string
  /** 登录凭证 */
  token: string
}

• LoginResult 是基于 BaseProfile 的扩展类型，使用 &（相当于javaextend继承） 进行类型合并。
• 它包含了 BaseProfile 的所有字段，并新增了 mobile 和 token 字段。

4 方法调用

  const onGetphonenumber : UniHelper.ButtonOnGetphonenumber = ((e) => {
    const encryptedData = e.detail!.encryptedData!
    const iv = e.detail!.iv!
    postLoginWxMinAPI({
      code,
      encryptedData,
      iv
    }).then(res => {
      console.log(res);
      loginSuccess(res.result)
    })
  })
  const loginSuccess = (profile : LoginResult) => {
    // 保存会员信息
    const memberStore = useMemberStore()
    memberStore.setProfile(profile)
    // 成功提示
    uni.showToast({ icon: 'success', title: '登录成功' })
    setTimeout(() => {
      // 页面跳转
      uni.navigateBack()
    }, 500)
  }

五 新建地址

1 请求封装

/**
 * 添加收货地址
 * @param data 请求参数
 */
export const postMemberAddressAPI = (data: AddressParams) => {
  return http({
    method: 'POST',
    url: '/member/address',
    data,
  })
}

2 参数定义

/** 添加收货地址: 请求参数 */
export type AddressParams = {
  /** 收货人姓名 */
  receiver: string
  /** 联系方式 */
  contact: string
  /** 省份编码 */
  provinceCode: string
  /** 城市编码 */
  cityCode: string
  /** 区/县编码 */
  countyCode: string
  /** 详细地址 */
  address: string
  /** 默认地址，1为是，0为否 */
  isDefault: number
}

3 方法调用

// 表单数据

  const form = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
  })
postMemberAddressAPI(form.value)

六 修改地址

1 请求封装

export const putMemberAddressByIdApi=((id:string,data:AddressItem)=>{
  return http({
    method:"PUT",
    url:`/member/address/${id}`,
    data
  })
})

2 参数定义

/** 添加收货地址: 请求参数 */
export type AddressParams = {
  /** 收货人姓名 */
  receiver: string
  /** 联系方式 */
  contact: string
  /** 省份编码 */
  provinceCode: string
  /** 城市编码 */
  cityCode: string
  /** 区/县编码 */
  countyCode: string
  /** 详细地址 */
  address: string
  /** 默认地址，1为是，0为否 */
  isDefault: number
}


export type AddressItem= AddressParams &{
  id:string,
  fullLocation:string,
}

3 方法调用

  // 表单数据
  const form = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
  })
putMemberAddressByIdApi(query.id, form.value)