uniapp 三端(小程序、H5、App)开发练习02

uni-app跨平台请求库 luch-request

uch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。

官网教程

安装依赖

npm install luch-request -S

• 创建http/index文件,对luch-request二次封装全局配置

/*
 * @Author: vhen
 * @Date: 2024-07-19 20:56:20
 * @LastEditTime: 2024-07-20 00:24:41
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\http\index.ts
 *
 */
import { handleAuthError, handleNetworkError } from '@/http/checkStatus'
import Request from 'luch-request'

const createRequest = (options = {}) => {
  return new Request({
    ...options,
  })
}

// 创建http实例对象
const http = createRequest({
  baseURL: import.meta.env.VITE_APP_BASE_URL,
  // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
  timeout: 60000,
  // #endif
})
// 网络请求
http.interceptors.request.use(
  (config) => {
    config.header = {
      'content-type': 'application/json',
      token: uni.getStorageSync('token') || '',
    }
    // 业务逻辑
    return config
  },
  (error) => {
    return Promise.reject(error)
  },
)
// 请求拦截
http.interceptors.response.use(
  (response: any) => {
    if (response.statusCode === 200) {
      // 业务逻辑
      return response.data
    } else {
      // 业务逻辑
      handleAuthError(response.data.code)
    }
  },
  (error) => {
    handleNetworkError(error.data.statusCode)
    return Promise.reject(error)
  },
)

export default http

• 创建checkStatus文件管理状态

/*
 * @Author: vhen
 * @Date: 2024-07-19 23:01:49
 * @LastEditTime: 2024-07-19 23:02:17
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\http\checkStatus.ts
 *
 */
/**
 * 处理http网络错误
 * @param errStatus
 */
export function handleNetworkError(errStatus: number) {
  let errMessage = '无法连接到服务器!'
  switch (errStatus) {
    case 400:
      errMessage = '错误的请求'
      break
    case 401:
      errMessage = '未授权，请重新登录'
      break
    case 403:
      errMessage = '拒绝访问'
      break
    case 404:
      errMessage = '请求错误,未找到该资源'
      break
    case 405:
      errMessage = '请求方法未允许'
      break
    case 408:
      errMessage = '请求超时'
      break
    case 500:
      errMessage = '服务器端出错'
      break
    case 501:
      errMessage = '网络未实现'
      break
    case 502:
      errMessage = '网络错误'
      break
    case 503:
      errMessage = '服务不可用'
      break
    case 504:
      errMessage = '网络超时'
      break
    case 505:
      errMessage = 'http版本不支持该请求'
      break
    default:
      errMessage = `其他连接错误 --${errStatus}`
  }

  return errMessage
}

/**
 *  处理业务错误
 * @param status
 * @returns
 */
export function handleAuthError(status: number) {
  const authErrMap: any = {
    10010: '登录失效，需要重新登录', // token 失效
    10011: '您太久没登录，请重新登录~', // token 过期
    10012: '账户未绑定角色，请联系管理员绑定角色',
    10013: '该用户未注册，请联系管理员注册用户',
  }
  if (Reflect.has(authErrMap, status)) {
    // 业务错误逻辑
    return authErrMap[status]
  }
}

• 创建apis/posts用户帖子接口模块，网上找的免费接口进行测试网络请求

/*
 * @Author: vhen
 * @Date: 2024-07-19 23:58:50
 * @LastEditTime: 2024-07-20 00:24:00
 * @Description: 现在的努力是为了小时候吹过的牛逼！
 * @FilePath: \fs-uniapp\src\apis\posts.ts
 *
 */

import http from '@/http'

// 获取某个用户所有的帖子
export const userPosts = (userId: number) => {
  return http.get(`/posts?userId=${userId}`)
}

• 创建apis/index 统一导出接口

// 测试模块
export * from './posts';

• 页面中调用接口

<script setup lang="ts">
import { userPosts } from '@/apis/posts'
const posts = ref([])
const getUserPosts = async () => {
  const res: any = await userPosts(1)
  posts.value = res
}
getUserPosts()
</script>

<template>
  <view class="content flex flex-col items-center justify-center">
    <image class="logo" src="/static/logo.png" />
    <view class="title" v-for="(item, index) of posts" :key="index">{{ item.title }}</view>
  </view>
</template>

<style>
.logo {
  width: 200rpx;
  height: 200rpx;
  margin-top: 200rpx;
  margin-right: auto;
  margin-bottom: 50rpx;
  margin-left: auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  width: 100%;
  font-size: 36rpx;
  color: #8f8f94;
  text-align: left;
  padding: 20upx;
}
</style>

github

fs-uniapp