做编程网站全免费建立自己的网站

1、封装http.ts

//utils--->http.ts/*** 添加拦截器*  拦截request请求*  拦截uploadFile文件上传** TODO*  1、非http开头需要拼接地址*  2、请求超时*  3、添加小程序端请求头标识*  4、添加token请求头标识*/
import { useMemberStore } from '@/stores/index'
const memberStore = useMemberStore()//实际项目种的baseUrl是根据环境变量来获取的
const baseUrl = 'https://xx/xx/xx'const httpInterceptor = {invoke(args: UniApp.RequestOptions) {// 拦截前触发,拼接urlif (!args.url.startsWith('http')) {args.url = baseUrl + args.url}//请求超时时间，默认60sargs.timeout = 10000//添加小程序请求头标志args.header = {...args.header,'source-client': 'miniapp',}//添加tokenconst token = memberStore.profile?.tokenif (token) {args.header.Authorization = token}},
}
// 添加拦截器
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)//定义泛型，接口返回的数据结构
interface Data<T> {code: stringmsg: stringresult: T
}
export const http = <T>(options: UniApp.RequestOptions) => {return new Promise<Data<T>>((resolve, reject) => {uni.request({...options,// 响应成功success(res) {if (res.statusCode >= 200 && res.statusCode < 300) {resolve(res.data as Data<T>)} else if (res.statusCode === 401) {//401错误，清理用户信息，跳转登录页，调用rejectmemberStore.clearProfile()uni.navigateTo({ url: '/pages/login/login' })reject(res)} else {//通用错误，调用rejectuni.showToast({title: (res.data as Data<T>).msg || '请求错误',icon: 'none',})reject(res)}},fail(err) {//响应失败，网络错误，调用rejectuni.showToast({title: '网络错误，换个网络试试',icon: 'none',})reject(err)},})})
}

2、封装api

//api--->my.ts
import { http } from '@/utils/http'export const getBanner = (data: any) => {return http<string[]>({url: '/xx/xx',method: 'GET',data: data,})
}

3、使用封装好的api

<script setup lang="ts">
import { getBanner } from '@/api/my'const getData = async () => {const res = await getBanner({})console.log(1111, res)
}
</script>