小程序请求二次封装
时间:2024-5-7 15:04 作者:suxiaojun 分类: 无
创建config文件,将配置文件放入一个目录中, 目录结构如下
config/
├── index.js # 入口文件
├── env.js # 环境获取
├── dev.js # 开发环境配置
└── pro.js # 生产环境配置
index.js
/**
* index
*/
import { getEnv } from './env.js';
import dev from './dev.js';
import pro from './pro.js';
const env = getEnv();
console.log('env', env);
let config = pro;
if (env == 'dev') {
config = dev;
}
export default config;
env.js 使用微信小程序APIwx.getAccountInfoSync()获取小程序当前的环境
/**
* env
*/
export function getEnv() {
// let res = __wxConfig.envVersion; // 文档已经没了,但是还可以用,不知道啥时候会弃用!!!
/*
* 获取当前账号信息
* miniProgram {
* appId, envVersion, plugin
* }
**/
let res = wx.getAccountInfoSync();
// 客户端中host有值,本地开发的时候host为null
if (res.miniProgram.envVersion == 'develop' || res.miniProgram.envVersion == 'trial') {
return 'dev';
} else {
return 'pro';
}
}
dev.js
/**
* dev
*/
export default {
BASE_URL: '本地域名', // http://127.0.0.1
};
pro.js
/**
* pro
*/
export default {
'BASE_URL': '线上域名', // https://www.baidu.com
}
接下来先随便封装请求后续再优化,先引入自己定义的config环境变量
// 引入环境变量
import config from '../config/index';
// 获取域名,小程序的域名需要在小程序后台配置相同的域名
const baseUrl = config.BASE_URL;
封装wx.request请求
module.exports = {
/**
* 二次封装wx.request
* url:请求的接口地址
* method:请求方式 GET,POST....
* data:要传递的参数
*/
request: (url, method, data) => {
//这里使用ES6的写法拼接的字符串
let _url = `${baseUrl}/${url}`;
return new Promise((resolve, reject) => {
wx.showLoading({
title: '正在加载',
});
wx.request({
url: _url,
data: data,
method: method,
header: {
'content-type': 'application/json',
'token': wx.getStorageSync('Token')
},
success: (res) => {
let {
code
} = res.data;
if (code === 200 || code === 1) {
resolve(res.data);
wx.hideLoading();
} else {
console.log(res);
wx.showToast({
title: res.data.data,
icon: "none",
duration: 2000
})
}
},
fail() {
reject('服务器连接中断')
}
});
});
},
}