企业官网建设流程全解析

config.baseURL = 'https://api.example.com' // api地址

config.timeout = 8000 // 单位毫秒，对应8秒

config.loadingText = '加载中...'

config.loading = true // 开启 loading 动画

return config

})

/* 2. 请求拦截 */

http.interceptors.request.use((config) => {

const token = uni.getStorageSync('token')

if (token) config.header.Authorization = `Bearer ${token}`

return config

})

/* 3. 响应拦截 */

http.interceptors.response.use(

(response) => response.data,

(err) => {

// 🔥 强制断言，让 UTS 闭嘴

(uni as any).$u.toast(err.message || '网络错误')

return Promise.reject(err)

}

)

export default http

复制代码

修改 main.uts，引入 request，并挂载为全局属性$http

复制代码

import App from './App.uvue'

import { createSSRApp } from 'vue'

import uviewPlus from 'uview-plus'

/* 1. 引入 request（里面已经初始化好 http） */

import http from '@/utils/request'

export function createApp() {

const app = createSSRApp(App)

/* 2. 挂到全局属性 */

app.config.globalProperties.$http = http

app.use(uviewPlus)

return {

app

}

}

复制代码

三、使用request

由于在main.uts挂载了全局属性，因此在pages里面的uvue文件，就可以直接调用了。比如：

get请求

const res = await this.$http.get('/test', {})

post请求

const res = await this.$http.post('/login', {

username: 'admin',

password: 123456

})

post请求，增加成功和失败处理

复制代码

async login() {

try {

/* === 成功分支 === */

const res = await this.$http.post('/login', {

username: 'admin',

password: '123456'

})

// 这里只写“成功后的业务”

uni.setStorageSync('token', res.token)

this.$u.toast('登录成功')

uni.switchTab({ url: '/pages/index/index' })

} catch (err: any) {

/* === 失败分支 === */

// 拦截器已弹通用提示，这里可做“额外”处理

console.error('登录失败', err)

if (err.statusCode === 401) {

this.$u.toast('账号或密码错误')

}

}

}

复制代码

post请求，局部请求不想显示 loading

await this.$http.post('/log', data, { loading: false })

uview-plus 的 http 模块已经内置了 “请求开始自动显示 loading，响应结束自动隐藏” 的机制，

你只需要 把 loading 开关打开 即可，成功/失败/超时都会 统一自动关闭，无需手动处理。

效果：

调用 this.$http.get/post 瞬间 → 出现 uview-plus 的 loading 遮罩

请求 成功/失败/超时 → 遮罩 自动消失（由 uview 内部 finally 关闭）

无需自己 uni.showLoading() / uni.hideLoading()

post请求，增加header

复制代码

await this.$http.post('/upload', body, {

header: {

'Content-Type': 'application/x-wwwz-form-urlencoded',

'X-Custom': 'abc123'

}

})

复制代码

put请求

const res = await this.$http.put('/test', {id:1})

delete请求

const res = await this.$http.delete('/test', {id:1})

四、登录页面

login.uvue

复制代码

<template>

<view class="">

<!-- 导航栏 -->

<u-navbar title="用户登录" />

<!-- 内容区 -->

<view class="content">

<!-- 头像 -->

<u-avatar :src="logo" size="80"></u-avatar>

<!-- 表单 -->

<u--form :model="form" labelPosition="left">

<u--input v-model="form.username" placeholder="请输入用户名" prefixIcon="account" />

<u--input v-model="form.password" placeholder="请输入密码" type="password" prefixIcon="lock" />

</u--form>

<!-- 按钮 -->

<u-button text="登录" type="primary" @click="login" />

<!-- 链接 -->

<view class="links">

<u-cell title="忘记密码？" isLink @click="gotoForget" />

<u-cell title="注册账号" isLink @click="gotoRegister" />

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

title: 'Hello',

logo: '/static/logo.png',

form: {

username: '',

password: '',

}

}

},

onLoad() {

},

methods: {

async login() {

if (!this.form.username) {

uni.showToast({ title: '请输入用户名', icon: 'none' })

return

}

// 请求登录接口

try {

/* === 成功分支 === */

const res = await this.$http.post('/login', {

username: this.form.username,

password: this.form.password

})

// 这里只写“成功后的业务”

uni.setStorageSync('token', res.token)

this.$u.toast('登录成功')

uni.switchTab({ url: '/pages/index/index' })

} catch (err : any) {

/* === 失败分支 === */

// 拦截器已弹通用提示，这里可做“额外”处理

console.error('登录失败', err)

if (err.statusCode === 401) {

this.$u.toast('账号或密码错误')

}

this.$u.toast('网络请求异常')

}

},

gotoForget() {

uni.navigateTo({ url: '/pages/forget/index' })

},

gotoRegister() {

uni.navigateTo({ url: '/pages/register/index' })

}

}

}

</script>

<style scoped>

.content {

padding: 40rpx;

display: flex;

flex-direction: column;

align-items: center;

}

.links {

margin-top: 30rpx;

width: 100%;

}

</style>

复制代码

效果如下：

image

针对大型项目，可以在utils里面新建一个api.ts，用来编写一些公用业务函数，例如：

复制代码

import http from './request.js'

/* 登录 */

export const login = (username, pwd) =>

http.post('/login', { username, pwd })

/* 轮播图 */

export const getBanner = () =>

http.get('/banner')

/* 商品列表 */

export const getGoods = (params) =>

http.get('/goods', { params })

复制代码

然后在pages里面的页面，就可以调用了，无需重复写函数。

复制代码

<script>

import { getBanner } from '@/utils/api.ts'

export default {

data() {

return {

title: 'Hello',

bannerList: [],

}

},

onLoad() {

this.getbannerList()

},

methods: {

async getbannerList() {

/* 直接调用 */

this.bannerList = await getBanner()

},

}

}

</script>

复制代码

注意：直接调用，要用异步，函数名前面加async