小程序请求封装和接口统一管理

小程序请求封装和接口统一管理

api/config.js 根据自己的需求定义

// 请求用的
const baseUrl = "";
// 上传文件用的
const upLoad = "";
export {
  baseUrl,
  upLoad
}

api/http.js

// http.js 发送真正的网络请求
import {baseUrl} from "./config";
const FN = require("../common/public"); // 这是我常用的微信方法封装

export default (url,data={},method='GET') => {
	return new Promise((resolve, reject) => {
		FN.Loading()
		wx.request({
			url: baseUrl + url,
			method,
			data,
			header: {
				'content-type': "application/json"
			},
			timeout: 10000,
			success: (res) => {
				FN.LoadingOff()
				resolve(res.data);
			},
			fail: (err) => {
				FN.Toast("网络开小差了");
				reject()
			}
		})
	})
}

api/api.js

// 接口统一管理
// 导入请求模块
import http from "./http";
// 请求地址统一管理 下面是例子
const API = {
  featured:'/position.content/lists', // 首页banner和首页菜单
}
const HTTP = {
  featured(data,method) {
    return http(API.featured,data,method);
  },
}
// 方法导出
module.exports = HTTP;

使用

index.js

import HTTP from "../../api/api";
page({
  data: {
      bannerList:[],
  },
onLoad: function (options) {
  this.featured();
},
// 首页banner和菜单数据函数
async featured() {
  let bannerList = await HTTP.featured({posid:1});
  bannerList = bannerList.data;
  let index = 0;
  bannerList.map(item =>item.id = index++);
  this.setData({bannerList});
},
})