UniApp+Vue3.2+ts实现请求API配置_uni+vue3+ts调用uni-api的api

1.下载luch-request请求库，官网

npm i luch-request -S

2.在utils文件夹下创建request.ts

/**
 * @name: luch-request uni-app跨平台请求库
 * @description: https://www.quanzhan.co/luch-request/
 * @author: tjp
 * @time: 2022-10-09 15:57:24
 */
import Request, {HttpResponse, HttpRequestConfig, HttpError} from 'luch-request'
// 本地环境地址
const BASE_API = 'http://localhost:8080'
// 局域网环境地址
// const BASE_API = ''
// 线上地址
// const BASE_API = ''
 
const http = new Request({
    //设置请求的base url
    baseURL: BASE_API,
    //超时时长5分钟
    timeout: 300000,
    header: {
        'Content-Type': 'application/json',
        'x-token': uni.getStorageSync('x-token') ? uni.getStorageSync('x-token') : ''
    }
})
//请求拦截器
http.interceptors.request.use(
    (config: HttpRequestConfig) => {
        // 拦截添加token
        config.header = {
            'x-token': uni.getStorageSync('x-token') ? uni.getStorageSync('x-token') : ''
        }
        return config
    },
    (error: any) => {
        return Promise.resolve(error)
    }
)
 
// 响应拦截器
http.interceptors.response.use(
    (response: HttpResponse) => {
        switch (response.config.method) {
            case 'GET':
                return formatData(response.data)
            case 'POST':
                // 登录接口保存token
                // ————————————————待修改—————————————————————
                if (response.config.url === '/user/login') {
                    uni.setStorageSync('x-token', response.data.data['x-token'])
                    return formatData(response.data)
                } else if (response.config.url === '/api/user_withdraw/apply') {
                    return formatData(response)
                }
                return formatData(response.data)
 
            default:
                return formatData(response.data)
        }
    },
    (error: HttpError) => {
        console.log('响应拦截器错误捕获', error)
        return Promise.resolve(error)
    }
)
 
function formatData(data: any) {
    switch (data.code) {
        case 200:
            return data.data
        case 400:
            uni.showToast({
                title: data.msg,
                icon: 'none'
            })
            return Promise.reject(data)
        case 401:
            uni.showToast({
                title: data.msg,
                icon: 'none'
            })
            return Promise.reject(data)
        case 405:
            // 一般是交易查询不到
            return Promise.reject(data)
        default:
            return data
    }
}
 
export default http

3.创建TestApi.ts文件

创建api文件夹，将所有的请求放在此文件夹中，在该文件夹中创建test.ts文件

/**
 @name: 示例
 @description: 示例请求api
 @author: tjp
 @time: 2022-10-09 15:53:56
 */
import http from '@/utils/request'
 
// GET
/*export function getInformation() {
    return http.request({
        url: '/api/common/config',
        method: 'GET'
    })
}*/
 
// POST
export function login(data) {
  return http.request({
    url: '/user/login',
    method: 'POST',
    data
  })
}
 
// 指定类型
/*export function switchLanguage(data: types.languageTypes) {
    return http.request({
        url: '/api/common/language',
        method: 'POST',
        data
    })
}*/
 
// 类型
/*interface userLoginTypes {
    address: string
    sign: string
    code?: string | boolean
}
interface languageTypes {
    language: string
}
export { userLoginTypes, languageTypes }*/

4.在页面中请求测试

<!--
@name: 首页
@description: 首页主界面
@author: tjp
@time: 2022-10-09 14:36:26
-->
<template>
  <view>
    <text>首页</text>
    <div>{{ token }}</div>
  </view>
</template>
 
<script setup lang="ts">
import {ref} from 'vue'
import {login} from '@/api/TestApi'
 
 
/*请求测试*/
const token = ref('')
const loginTest = async () => {
  const res = await login({loginName: 'test1', loginPass: '123456'})
  token.value=String(res)
  console.log(res)
  console.log(token)
}
 
onLoad(() => {
  loginTest()
  console.log("homestorage",uni.getStorageSync("USER_INFORMATION"))
})
 
onMounted(() => {
 
})
 
</script>
 
<style scoped lang="scss">
 
</style>

Master-Tang资源文档服务器http://www.tangjp.fun:8080/