封装微信小程序请求

最近在写微信小程序的项目，发现一些比以前写小程序更好的封装方法。

之前封装

之前封装请求都是直接把请求的方法写到utils.js中. 请求参考

使用请求需要很多代码，而且后续不好修改请求地址

优化封装

项目下新建一个request文件夹

在request中新建 api.js fetch.js request.js

api.js

// 开发的服务器
var baseUrl = "http://test.com:8001";

// 测试的服务器
// var baseUrl = 'http://127.0.0.1:8637'

// 正式环境
// var baseUrl = 'http://www.test.com'

// 首页数据接口
var homeApi = baseUrl + "/index/index";

// 登录接口（没有账号自动注册）
var LoginApi = baseUrl + "/auth/loginByWeb";

// 全部分类数据接口
var CatoryApi = baseUrl + "/catalog/index";

// 获取当前分类数据
var CategoryCurrentApi = baseUrl + "/catalog/current";

// 搜索窗口数据
var PopupApi = baseUrl + "/search/index";

// 实时搜索功能
var SearchingApi = baseUrl + "/search/helper";

// 搜索框商品搜索
var GoodsSearchApi = baseUrl + "/goods/list";

// 清除历史记录
var ClearHistoryApi = baseUrl + "/search/clearhistory";

// 品牌详情
var BrandDetailApi = baseUrl + "/brand/detail";

// 分类数据获取
var GoodsCategoryApi = baseUrl + "/goods/category";

// 分类页面商品列表请求
var ChennelAboutGoodsApi = baseUrl + "/goods/list";

//导出
module.exports = {
  homeApi,
  LoginApi,
  CatoryApi,
  CategoryCurrentApi,
  PopupApi,
  SearchingApi,
  GoodsSearchApi,
  ClearHistoryApi,
  BrandDetailApi,
  GoodsCategoryApi,
  ChennelAboutGoodsApi
};

request.js

封装wx.request

function request(params) {
  // 封装网络请求的代码
  return new Promise(function (resolve, reject) {
    wx.hideLoading();
    wx.showLoading();
    wx.request({
      url: params.url,
      data: params.data || {},
      header: params.header || {},
      method: params.method || 'GET',
      dataType: 'json',
      success: function(res) {
        wx.hideLoading();
        resolve(res.data)
      },
      fail: function(err) {
        wx.hideLoading();
        wx.showToast({
          title: err || '请求错误！',
          mask: true
        })
        reject(err)
      }
    })
  }) 
}
//导出
module.exports = {
  requestApi: request
}

fetch.js

var api = require("./api.js");
var request = require("./request.js");

// 首页数据接口
function getHome() {
  return request.requestApi({
    url: api.homeApi,
  });
}

// post请求
function LoginFn(params) {
  return request.requestApi({
    url: api.LoginApi,
    data: params,
    header: {
      "content-type": "application/x-www-form-urlencoded",
    },
    method: "POST",
  });
}

// 全部分类数据接口
function getCatory() {
  return request.requestApi({
    url: api.CatoryApi,
  });
}

// 获取当前分类数据
function CategoryCurrentFn(params) {
  return request.requestApi({
    url: api.CategoryCurrentApi,
    data: params,
  });
}

// 搜索窗口数据
function PopupDataFn() {
  return request.requestApi({
    url: api.PopupApi,
  });
}

// 实时搜索功能
function SearchingFn(params) {
  return request.requestApi({
    url: api.SearchingApi,
    data: params,
  });
}

// 搜索框商品搜索
function GoodsSearchFn(params) {
  return request.requestApi({
    url: api.GoodsSearchApi,
    data: params,
  });
}

// 清除历史记录
function ClearHistoryFn(params) {
  return request.requestApi({
    url: api.ClearHistoryApi,
    data: params,
    header: {
      "content-type": "application/x-www-form-urlencoded",
    },
    method: "POST",
  });
}
// 品牌详情
function BrandDetailFn(params){
  return request.requestApi({
    url: api.BrandDetailApi,
    data: params
  });
}

// 分类数据获取
function GoodsCategoryFn(params){
  return request.requestApi({
    url: api.GoodsCategoryApi,
    data: params
  });
}

// 分类页面商品列表请求
function ChennelAboutGoodsFn(params){
  return request.requestApi({
    url: api.ChennelAboutGoodsApi,
    data: params
  });
}

module.exports = {
  getHome,
  LoginFn,
  getCatory,
  CategoryCurrentFn,
  PopupDataFn,
  SearchingFn,
  GoodsSearchFn,
  ClearHistoryFn,
  BrandDetailFn,
  GoodsCategoryFn,
  ChennelAboutGoodsFn
};

使用请求 需要导入对应的fetch即可

//导入请求
const {getHome} = require("../../request/fetch")

//发送请求获取数据
getHomeData(){
  getHome().then(res=>{
    console.log(res);
  }
}