2021最新微信小程序请求封装以及api统一管理

前言

最近在重构公司小程序，看到了重构前的小程序的统一接口管理只能是用“眼花缭乱”来形容了，令我没想到的是我试着搜索了一下小程序请求api管理，然而大多数都是几年前的文章，封装的五花八门，眼花缭乱。所以重构小程序第一步，封装请求及统一api管理，就像在vue项目中管理api那样。
之前是这样的，简短的一个地址被拆成了几个变量加来加去？？？及不优雅。

正文开始

1. 小程序项目根目录创建http文件夹，文件夹中新建http.js，新建api.js 这两个文件。
   

2.小程序http.js文件中配置基地址，新建request函数，返回一个promise对象，导出函数

//  配置基地址
const baseURl = 'http://192.168.0.117:6007/' //  本地服务器
function request({
	url='',
	method='GET',
	header={ "content-type": "application/json" },
	data={}
}) {
	return new Promise((resolve, reject) => {
		wx.showLoading({
			title: '加载中...'
		})
		wx.request({
			url: baseURl + url,
			method: method,
			data:data,
			header:header,
			timeout:5000,
			//  成功回调
			success: res => {
				wx.hideLoading()
				resolve(res.data)
			},
			//  错误回调
			fail: err => {
				wx.hideLoading()
				
				wx.showToast({
					title: '网络错误！',
					icon:'error',
					duration: 2000
				})
				reject(err)

				console.log('cuowy');
			},
			//  请求完成回调
			complete: () => {
				// wx.hideLoading()
			}
		});
	})
}

export default request

3.api.js文件中，导入http.js文件，为每个请求创建请求方法，后期根据自己接口多的话可以api文件拆分，将不同模块不同类型的请求归类拆分到不同的文件夹，便于后期维护。

import request from './http.js'

//  登录
export function login (data) {
	return request({
		url:'/user/login',
		data
	})
}
// 注册
export function register (data) {
	return request({
		url:'/user/register',
		method:'POST',
		data
	})
}
// 重置密码
export function forgetPassword (data) {
	return request({
		url:'/user/forgetPassword',
		method:'POST',
		data
	})
}

4.页面中按需引入api请求方法，async await调用，这样更大的一个好处就是当前页面中使用了那些api一目了然。

//获取应用实例
const app = getApp();
import { login } from '../../http/api'
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		statusBarHeight: app.globalData.statusBarHeight, //导航栏的高度
		versions: app.globalData.versions, //  版本号
		phone: "", //  手机号
		password: "", //  密码
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		
	},
	//  登录
	async getLogin(params,type='default') {
		//  此处调用登录请求
		let res = await login(params)
		if (res.code !== 1000) {
			//  请求失败处理
		}
		//  处理请求成功的逻辑
		//  跳转主页 延时2秒
		redirectTo('index', {}, 2000)
	},
	
})

大概就是这样了！

ok跑路！