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>