• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序接口封装、原生接口封装、request、promise封装

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

相信大家在做微信小程序的时候会有很多地方需要调用接口,就和pc以及手机端一样,多个页面多次调用会有很多状态,那为了节省大家的开发时间就会需要给请求的接口做一些简单封装,便于开发,在这里我用了两个js,一个js封装的是方法名,另外一个是接口名,统一管理

下面这个是统一的接口方法封装

const baseURL = "接口名";
const request = params => {
  const token = wx.getStorageSync("token").token;
  return new Promise((resolve, reject) => {
    wx.showLoading();
    wx.request({
      url: baseURL + params.url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
        token: token
      },
      success(res) {
        const pages = getCurrentPages();
        // const app = getApp();
        if (res.statusCode === 200) {
          if (res.data.code === 200) {
            resolve(res.data);
          } else if (res.data.code === 401) {
            wx.navigateTo({
              url: '/pages/login/index',
            })
          } else {
            if (res.data.code == 1104) {
              wx.clearStorageSync()
              wx.redirectTo({
                url: '/pages/login/index',
              })
            } else {
              reject(res.data);
            }
          }
        }
      },
      fail(err) {
        reject(err);
      },
      complete() {
        wx.hideLoading();
      }
    });
  });
};
const _upload = (filePath, type) => {
  const token = wx.getStorageSync("token").access_token;
  return new Promise((resolve, reject) => {
    wx.showLoading();
    wx.uploadFile({
      url: baseURL + "upload_file", //仅为示例,非真实的接口地址
      filePath,
      name: "file",
      header: {
        authorization: token ? "Bearer " + token : undefined
      },
      formData: {
        type
      },
      success(res) {
        resolve(JSON.parse(res.data));
      },
      fail(err) {
        reject(err);
      },
      complete() {
        wx.hideLoading();
      }
    });
  });
};
const _get = (url, data) => {
  return request({
    url,
    data,
    method: "GET"
  });
};
const _post = (url, data) => {
  return request({
    url,
    data,
    method: "POST"
  });
};
const _put = (url, data) => {
  return request({
    url,
    data,
    method: "PUT"
  });
};
const _delete = (url, data) => {
  return request({
    url,
    data,
    method: "DELETE"
  });
};
module.exports = {
  baseURL,
  _get,
  _post,
  _put,
  _delete,
  _upload
};

 

下面这个是统一的接口管理

import { _get, _post, _put, _delete, _upload } from "./request";

// 图片上传
const getUploadImg = data => {
  return _post("接口名", data);
};
module.exports = {
  getUploadImg
};

封装的比较简单粗暴,不过通俗易懂
使用的时候直接在页面引入就可以


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序页面数值显示为null发布时间:2022-07-18
下一篇:
C#Winform小程序:局域网设置NTP服务器、实现时间同步发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap