更新记录

1.0.4（2024-06-27） 下载此版本

优化

1.0.3（2024-06-21） 下载此版本

优化写法

1.0.2（2024-06-20） 下载此版本

优化写法

平台兼容性

封装request promise写法 async+await 支持 GET，POST，PUT，DELETE，CONNECT，HEAD，OPTIONS，TRACE;

自定义请求头，更加灵活，自定义层业务层错误处理函数，支持外部接口

使用方法 App.vue代码如下

<script>
export default {
    globalData: {
        baseUrl:'',
        devUrl: 'http://devUrl.com',
        proUrl: 'http://proUrl.com',
        baiduUrl:'http:baidu.com',
        httpSuccessCodes:[200, 201, 202, 203, 204, 205, 206], // http请求成功的状态码（必须是数组）
        /**
         * 业务层错误处理函数
         */
        systemError(res) {
            if (res.code === 401 || res.code === 403) {
                uni.showToast({
                    title: '登录过期',
                    icon: 'error'
                });
                uni.clearStorageSync();
                setTimeout(() => {
                    uni.reLaunch({
                        url: '/pagesA/login/login'
                    });
                }, 1500);
                return '登录过期';
            }
            if (res.code === 500) {
                uni.showToast({
                    title: res.message,
                    icon: 'none',
                    duration: 2500
                });
                return res.message;
            }
        },
        /**
         * 设置请求头
         */
        setHeader(auth,formData) {
            let header = {
                'content-type': 'application/json',
                clientType: 'C',
                communityId: uni.getStorageSync('communityId'),
                Authorization:uni.getStorageSync('token')
            };
            // 一些项目的post的请求头需要设置为x-www-form-urlencoded，可以在接口里设置为formData = true
            if (formData) {
                header = {
                    ...header,
                    'content-type': 'application/x-www-form-urlencoded',
                };
            }
            // auth代表是否鉴权，默认是，如果不需要传Authorization等，可以在接口里设置为auth = false
            if (!auth) {
                delete header.Authorization;
            }
            return header
        }
    },
    onLaunch: function () {
        this.setBaseUrl();
    },
    onShow: function () {
        console.log('App Show');
    },
    onHide: function () {
        console.log('App Hide');
    },
    methods: {
        /**
         * 请求配置
         */
        setBaseUrl() {
            if (process.env.NODE_ENV === 'development') {
                // 开发环境 运行
                // #ifdef H5
                this.globalData.baseUrl = location.origin;
                // #endif
                // #ifndef H5
                this.globalData.baseUrl = this.globalData.devUrl;
                // #endif
            } else {
                // 生产环境 发行
                this.globalData.baseUrl = this.globalData.proUrl;
            }
        }
    }
};
</script>

<style>
/*每个页面公共css */
</style>

如果有h5需要配置跨域代理，vue3项目在根目录创建vite.config.js，vue2的话是vue.congfig.js，同理代码如下

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
export default defineConfig({
    plugins: [
        uni(),
    ],
    server: {
      proxy: {
        '/api/': {
          target: 'http://pro.com',
          changeOrigin: true,
        }
      },
    },
});

根目录创建apis文件夹，用来放置接口文件 （文件夹名不要用api，因为h5配置代理会把所有api后的路径代理，所以要改成apis）

以apis文件的index.js为例，代码如下

import { request } from '@/uni_modules/yq-request/js_sdk/index';

/**
 * 首页商品列表接口 post的formData形式
 */
export const goodsApi = (data) =>
    request({
        api: '/api/goodsPage',
        method:'POST',
        formData:true,
        data
    });

/**
 * 首页商品列表接口 post的json形式
 */
export const goodsJsonApi = (data) =>
    request({
        api: '/api/goodsPage',
        method:'POST',
        data
    });

/**
 * 首页公示公告列表接口 get
 */
export const newsApi = () =>
    request({
        api: "/api/listIndex",
    });

/**
 * 外部接口 get 不需要鉴权auth设置为false
 */
export const mapApi = () =>
    request({
        url:getApp().globalData.baiduUrl, // 示例url
        api: "/api/listIndex",
        auth：false
    }); 

在index.vue中使用 (vue3)

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
    </view>
</template>

<script setup>
import { goodsApi, newsApi } from '@/apis/index';
import { onShow } from '@dcloudio/uni-app';

/**
 * 获取商品
 */
const getGoods = async () => {
    const res = await goodsApi();
    console.log('res', res);
};

/**
 * 获取公示公告
 */
const getNews = async () => {
    const res = await newsApi();
    console.log('res', res);
};

onShow(() => {
    getGoods();
    getNews();
});
</script>

在index.vue中使用 (vue2)

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
    </view>
</template>

<script>
import { goodsApi, newsApi } from '@/apis/index';
export default {
    data(){
        return {

        }
    },
    methods:{
        /**
         * 获取商品
         */
         async getGoods() {
            const res = await goodsApi();
            console.log('res', res);
        },
    },
    onShow() {
        this.getGoods()
    }
}

</script>