微信小程序如何使用Promise对wx.request()封装详解(附完整代码)

 更新时间:2023年03月13日 09:27:16   作者:coderYYY  
微信小程序的wx.request是微信小程序最早生成的数据库传输模式,数据传输简单明确,下面这篇文章主要给大家介绍了关于微信小程序如何使用Promise对wx.request()封装的相关资料,需要的朋友可以参考下

1. 原生wx.request()的缺点

wx.request官网说明

  • 回调地狱,可能会出现多层success套用的情况(用Promise封装解决)
  • 效率低,代码冗杂,每次都要写共同的参数(比如headers,公共的url)
  • 可维护性差,后续查看和改代码不方便,封装后都在同一个文件,一目了然
wx.request({
  url: 'example.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

作为一个合格的前端开发,为了代码质量和可维护性(不是因为懒),肯定要对这种代码进行封装,来让我们的代码变得更优雅~~

2. 封装思路

所有的封装思路(无论是组件还是逻辑代码),总结起来一句话就是抽取共性

观察我们的网络请求代码,可以发现,有很多是一样的,如公共请求路径、对响应错误的处理方法、headers参数(如token)
不同的如具体的接口地址、请求类型、请求参数,我们封装的时候把相同的抽取成一个文件,不同的地方再进行传参即可。

3. 具体实现代码

先建一个api文件夹(叫什么都可以,但是为了规范化),在下面新建文件request.js

// ----http----
// api URL
const apiUrl = "https://接口地址:端口";// 公共的请求地址
// 封装微信请求方法
const request = (params) => {
  let url = params.url;
  let data = params.data;
  let method = params.method;
  let header = {
    "Content-Type": "application/json"
  };

  // 鉴权验证,获取登录之后后端返回的token,存在即在头部Authorization写token,具体的看后端需求
  if (wx.getStorageSync("token")) {
    // header.Authorization = wx.getStorageSync("token");
    header.token = wx.getStorageSync("token");
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: apiUrl + url, // api url
      method: method, // get/post
      data: data, // 请求参数
      header: header, // 头部
      success(res) {
        // 请求成功
        // 判断状态码---errCode状态根据后端定义来判断
        if (res.statusCode < 399) {
          if (res.data.Code === 401) {
            wx.showModal({
              title: "提示",
              content: "请登录",
              showCancel: false,
              success(res) {
                wx.navigateTo({
                  url: "/pages/login/login",
                });
              },
            });
            reject(res.data);
          }
          resolve(res.data);
        } else {
          // 其他异常
          switch (res.statusCode) {
            case 404:
              wx.showToast({
                title: '未知异常',
                duration: 2000,
              })
              break;
            default:
              wx.showToast({
                title: '请重试...',
                duration: 2000,
              })
              break;
          }
          reject("未知错误,请稍后再试");
        }
      },
      fail(err) {
        if (err.errMsg.indexOf('request:fail') !== -1) {
          wx.showToast({
            title: '网络异常',
            icon: "error",
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '未知异常',
            duration: 2000
          })
        }
        reject(err);
      },
      complete() {
        wx.hideLoading()
      },
    });
  });
};

module.exports = {
  apiUrl,
  request,
}

然后再按业务需求,对具体的接口地址进行封装,比如,我这里在api文件夹下再新建一个user.js文件,里面放登录,注册的一些方法,请求类型和请求参数根据接口文档写。

import {
  request
} from "./request"


// 用户相关

// 登录
export const login = (params) => {
  return request({
    url: '/user/login',
    data: params,
    method: 'POST',
  })
}
// 注册
export const register = (params) => {
  return request({
    url: '/user/reg',
    data: params,
    method: 'POST',
  })
}

正式在项目中使用:

import {
  login
} from '../../../api/user'
// 点击登录的方法
handleLogin(){
    login({
      name: xxx,
      password: xxx,
    }).then((res) => {
      if (res.code == 200) {
   		// 登录成功之后的处理
      } else {
		// 登录失败的处理
      }
    }).catch((res) => {})
}

总结

到此这篇关于微信小程序如何使用Promise对wx.request()封装的文章就介绍到这了,更多相关微信小程序用Promise对wx.request()封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序转化为uni-app项目的方法示例

    微信小程序转化为uni-app项目的方法示例

    这篇文章主要介绍了微信小程序转化为uni-app项目的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 使用JavaScript将PDF页面中的标注扁平化的操作指南

    使用JavaScript将PDF页面中的标注扁平化的操作指南

    扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,Dynamsoft Document Viewer是一个用于文档扫描和查看的JavaScript SDK,可以添加标注、导出PDF,在本文中,我们将探讨如何使用它,需要的朋友可以参考下
    2025-01-01
  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    这篇文章主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下
    2016-01-01
  • 详细解密jsonp跨域请求

    详细解密jsonp跨域请求

    当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。
    2015-04-04
  • js获取浏览器地址(获取第1个斜杠后的内容)

    js获取浏览器地址(获取第1个斜杠后的内容)

    这篇文章主要给大家介绍了关于js获取浏览器地址(获取第1个斜杠后的内容)的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • moment.js 时间日期处理详解

    moment.js 时间日期处理详解

    这篇文章主要介绍了moment.js 时间日期处理详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • HTML+JavaScript实现筋斗云导航栏效果

    HTML+JavaScript实现筋斗云导航栏效果

    这篇文章主要为大家介绍了如何利用HTML+JavaScript+CSS实现筋斗云导航栏效果,当鼠标经过某个li,筋斗云跟着到当前的位置,感兴趣的小伙伴可以试一试
    2022-03-03
  • JS防止用户多次提交的简单代码

    JS防止用户多次提交的简单代码

    这篇文章介绍了JS防止用户多次提交的简单代码,有需要的朋友可以参考一下
    2013-08-08
  • unicloud云开发进阶获取首页列表数据示例详解

    unicloud云开发进阶获取首页列表数据示例详解

    这篇文章主要为大家介绍了unicloud云开发进阶获取首页列表数据示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 小程序实现自定义导航栏适配完美版

    小程序实现自定义导航栏适配完美版

    这篇文章主要介绍了小程序实现自定义导航栏适配完美版,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论