UniApp+Vue3.2+ts implements request API configuration

1. Download luch-request request library, official website

npm i luch-request -S

2. Create request.ts under the utils folder

/**
 * @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. Create the TestApi.ts file

Create an api folder, place all requests in this folder, and create a test.ts file in this folder

/**
 @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. Request a test in the page

<!--
@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 resource documentation server http://www.tangjp.fun:8080/