如何优雅的使用微信小程序的wx.request请求(封装request.js工具类)

首先官方的文档不是支持Promise风格的请求 我们通过官方文档可以看到微信小程序发请求的一些具体参数,下面的代码展示了用wx.request()发送的一个标准请求:

wx.request({
          url: "https://xxx.com",
          method:"POST",
          data:{
            phone:187********,
            password:'123456'
          },
          success:res=>{
            console.log('登录成功',res)
          },
          fail:err=>{
            console.log('登录失败',err)
          }
        })
封装

在封装前我们需要知道用wx.request发请求的几个比较重要的参数:

  • url -- 请求地址

  • method -- 请求方式(Get/Post,这里我们只封装这2个请求)

  • data -- 请求的参数

  • success -- 接口调用成功的回调函数

  • fail -- 接口调用失败的回调函数

OK,了解完这几个参数后我们开始正式封装一个Promise风格的请求

/**
       request.js
     * 封装一个Promise风格的通用请求
     * url - 请求地址
     * option - 包含请求方式、请求参数的配置对象
 */
 var app = getApp(); //引入全局app.js,我们可以在globalData中定义一些公用的数据,比如baseUrl、token
 import Toast from '/@vant/weapp/toast/toast';//引入vant插件,用于提示错误
 const request = function(url,options){
     return new Promise((resolve,reject)=>{
         wx.request({
             url:app.globalData.baseUrl+url,
             method:options.method,
             data:options.method=="GET"?options.data:JSON.stringify(options.data),
             // header这里根据业务情况自行选择需要还是不需要
             header:{
                 'Authorization':'Bearer '+app.globalData.token
             },
             success: (res) => {
                if (res.data.code == 500) {
                  Toast(res.data.msg);
                  reject(res.data.msg)
                } else {
                  resolve(res)
                }
              },
              fail: (err) => {
                reject(err)
              }
         })
     })
 }
    
​
   module.exports = {
       //封装get方法
       get(url,data){
           return request(url,{
               method:"GET",
               data
           })
       },
       //封装post方法
       post(url,data){
           return request(url,{
               method:"POST",
               data
           })
       }
   }

这样,一个简单的Promise风格的请求就封装好了,接下来我们看如何使用

使用
//api.js 我们将所有的接口统一管理
    const request = require("./request") //引入封装好的js文件
    module.exports = {
      // 登录
      login(data){
       return request.post('/user/login',data)
      }
    }
// login.js
   const api = require("../../api") //引入同意管理的接口js
   const app = getApp() //引入全局对象
   import Toast from '/@vant/weapp/toast/toast'; //引入vant提示插件
   Page({
       data:{
           phone:123456,
           code:0000
       },
       //登录
       login() {
        if (!this.data.phone.trim()) {
          Toast('请输入正确的手机号');
          return
        }
        let data = {
          phone: this.data.phone,
          password: this.data.password,
        }
        api.login(data)     //这里直接用api调用login即可
          .then(res => {
            console.log('登录成功', res)
            wx.reLaunch({
              url: '../index/index',
            })
          })
          .catch(err => {
            console.log('登录失败', err)
          })
      },
     })
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值