更新记录
1.0.4(2024-06-27)
下载此版本
优化
1.0.3(2024-06-21)
下载此版本
优化写法
1.0.2(2024-06-20)
下载此版本
优化写法
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
封装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>