zoukankan      html  css  js  c++  java
  • wx.request().then()不可用的解决方法

    微信小程序和服务器端的数据交互是通过wx.request()这个API函数来完成的,这是一个异步函数。

    在有些情况下,我们需要根据服务器传递回来的值来做下一个操作的时候,其代码都要写到success:function(res){ }函数中。

    如果success:function(res){ } 中又要调用wx.request(),就会碰到所谓的“回调地狱”,难以编码和维护。

    wx.request()还不支持Promise这种方式,也就是说不能用wx.request().then()的方式来处理数据,所以我们需要用Promise对wx.request()来做封装。

    使用Promise分两步:

    一 、先构造 Promise 对象,语法如下,Promise的构造函数用匿名函数 function(resolve, reject){ } 做参数,

    匿名函数的 resolve 和 reject 参数是执行成功和失败时要调用的函数:

    let pro = new Promise(function(resolve, reject) {   
        //do something.
    });

    二、然后在then方法中传入要回调的函数做下一步的处理,如下:

    pro.then(resolve, reject);

    将其应用到wx.request()上,即

    let baseOptions = (params, method = 'GET')=>{
        let { url, data } = params
        let contentType = 'application/x-www-form-urlencoded'
        contentType = params.contentType || contentType
        let pro = new Promise(function(resolve, reject) {
            wx.request({
                isShowLoading: true,
                loadingText: '正在加载',
                url: base + url,
                data: data,
                method: method,
                header: { 
                    'content-type': contentType,
                    'Authorization': wx.getStorageSync('token') 
                },
                success(res) {
                    if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
                        reject('请求资源不存在')
                    } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
                        reject('服务端出现了问题')
                    } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
                        reject('没有权限访问')
                    } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
                        if (res.data.code === HTTP_STATUS.TOKEN_EXPIRE) {
                            wx.clearStorageSync()
                            wx.reLaunch({
                                url:'/pages/index/index'
                            })
                            wx.showToast({
                                title: '登录状态过期,请重新登录',
                                icon:'none',
                                duration: 2000
                            })
                        }else if(res.data.code === HTTP_STATUS.AUTHENTICATE){
                            wx.clearStorageSync()
                            wx.reLaunch({
                                url:'/pages/index/index'
                            })
                            wx.showToast({
                                title: '认证失败,请重新登录',
                                icon:'none',
                                duration: 2000
                            })
                        }
                        else {
                            if(res.header.Authorization){
                                wx.setStorageSync('token',res.header.Authorization)
                            }
                            resolve(res.data)
                        }
                    }
                },
                fail(error) {
                    console.error(error)
                    if(error.errMsg === 'request:fail timeout'){
                        error.errMsg = '请求超时'
                    }
                },
                error(e) {
                    console.error('api', '请求接口出现问题', e)
                }
            })
        })
        return pro
    }
    
    export let get = (url, data = '')=>{
        let option = { url, data }
        return baseOptions(option)
    }
    
    export let post = function (url, data, contentType) {
        let params = { url, data, contentType }
        return baseOptions(params, 'POST')
    }

    调用代码为:

    getUserInfoByOpenId() {
      const openId = wx.getStorageSync('openid')
      get('/sysuser/getUserInfoByOpenId',{openId:openId}).then(
        res => {
          if(res.code === 200){
            this.setData({
              userInfo: res.data
            })
          }else {
            wx.showToast({
              title: res.message,
              icon: 'none',
              duration: 2000
            })
          }
        }
      ).catch((e) => {
        wx.showToast({
          title: e.errMsg,
          icon: 'none',
          duration: 2000
        })
      })
    }

    即相当于可使用wx.request().then()了。

  • 相关阅读:
    LeetCode 1275. 找出井字棋的获胜者 Find Winner on a Tic Tac Toe Game
    LeetCode 307. 区域和检索
    LeetCode 1271 十六进制魔术数字 Hexspeak
    秋实大哥与花 线段树模板
    AcWing 835. Trie字符串统计
    Leetcode 216. 组合总和 III
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 示例之 复杂(complex)属性(property)
    Mybatis 高级结果映射 ResultMap Association Collection
    Mybatis 高级结果映射 ResultMap Association Collection
  • 原文地址:https://www.cnblogs.com/luoyihao/p/14704784.html
Copyright © 2011-2022 走看看