评论

we.request请求封装

对wx.request进行封装,减少一些不必要的代码

第一步在utils下面创建一个http.js,

let sUrl = "https://www.baidu.com";
function getData (url, data, nb) {
  wxrequest({
    url: sUrl + url,
    data: data,
    method: 'post',
    header: {
      // "ContentType": "json",   //get请求时候"ContentType": "applicationwwwformurlencoded", //POST请求的时候这样写
      'token': wx.getStorageSync('token')
    },
    success: functionres) {
      returntypeof nb == "function" && nb(res.data)
    },
    fail: functionres) {
      returntypeof nb == "function" && nb(res.data)
    }
  })
}
module.exports = {
  req: getData
}

第二步在app.js引入

let http = require ('utils/http.js')


//封装请求res: {
    req: http.req  //这里配置我们需要的方法
  },

然后在你需要的页面直接应用

let data = {
      
    }//data是你要传的参数


    app.res.req('app-web/userproject/list', data, (res) => {
     
    })

代码片段https://developers.weixin.qq.com/s/Pk6Pffmq7Gey

最后一次编辑于  01-09  
点赞 4
收藏
评论

6 个评论

  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    01-07
    /**
     * post 请求
     * @param {String} path 请求url,必须
     * @param {Object} params 请求参数,可选
     * @param {String} method 请求方式 GET | POST,默认为 POST
     * @param {Object} option 可选配置,如设置请求头 { headers:{} }
     * @param {Boolean} option 可选配置,是否显示‘加载中...’的toast,默认显示
     *
     * option = {
     *  headers: {} // 请求头
     * }
     *
    **/
    // 获取接口地址
    const _getPath = path => (`https://xxx.xxx.com${path}`)
    
    
    // 封装接口公共参数
    const _getParams = (data = {}) => {
      const timestamp = Date.now()
      const token = util.getStorageSync('token') || ''
      const version = data.version
      const sign = data.sign || util.md5(version+timestamp)
      return Object.assign({}, {
        timestamp,
        token,
        sign,
        deviceId,
        version
      }, data)
    }
    export const postAjax = (path, params) => {
      const url = _getPath(path)
      const data = _getParams(params)
      // 处理请求头
      const headers = util.extend(
        true, {
        "content-type": "application/x-www-form-urlencoded"
      },
        headers
      );
      const method = 'POST'
      return new Promise((resolve, reject) => {
        my.request({
          url,
          method,
          data,
          headers,
          success: (res) => {
            resolve(res.data)
          },
          fail: function(res) {
            reject(res.data)
          },
          complete: function(res) {
    
    
          }
        });
      })
    }
    

    let postData = {

    townId: xxx

    }

    app.postAjax('/api.xxx.com', postData).then((res) => {})

    01-07
    赞同 2
    回复 2
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-08
      代码中删除了一部分基础参数。。
      01-08
      1
      回复
    • 小肥羊
      小肥羊
      01-09
      你是最棒的
      01-09
      回复
  • 羊咩咩ꦿ゜
    羊咩咩ꦿ゜
    01-07

    同步request的封装

    async function request(url, data = {}, method = 'GET'){
        return new Promise(function(resolve, reject) {
            wx.request({
                url: url
                data: data
                method: method
                header: {
                    'Content-Type': 'application/json'
                    'H-Active-Token': wx.getStorageSync('token'
                }
                success: function(res) {
                    resolve(res)
                
                failfunction(err){
                    reject(err)
                
            })
        })
    }
    


    01-07
    赞同 1
    回复
  • 小肥羊
    小肥羊
    01-09

    非常棒,不过能来个代码片段就更好了。

    01-09
    赞同
    回复 4
    • Dream
      Dream
      01-09
      可以的
      01-09
      1
      回复
    • Dream
      Dream
      01-09
      https://developers.weixin.qq.com/s/Pk6Pffmq7Gey
      01-09
      1
      回复
    • 小肥羊
      小肥羊
      01-09回复Dream
      非常感谢,送上一个赞
      01-09
      1
      回复
    • Dream
      Dream
      01-09
      嘻嘻
      01-09
      回复
  • 袁述(小程序全栈开发工程师)
    袁述(小程序全栈开发工程师)
    01-07

    还行,有待改进,还可以再封装一下,

    01-07
    赞同
    回复 1
    • Dream
      Dream
      01-07
      嗯嗯
      01-07
      回复
  • 假装在上海
    假装在上海
    01-06


    哥们,细心点啊。这里很多小细节错误,改一下

    01-06
    赞同
    回复 3
    • Dream
      Dream
      01-06
      我看下哈
      01-06
      回复
    • 社区产品经理-汤尼
      社区产品经理-汤尼
      01-06回复Dream
      你好,这是社区代码排版Bug,正在修复,完成后会知会。请暂缓修改。
      01-06
      回复
    • Dream
      Dream
      01-06回复社区产品经理-汤尼
      嗯嗯,写完是好的,点发表就变了
      01-06
      回复
  • 假装在上海
    假装在上海
    01-06
    //封装请求
       res{
        req httpreq  //这里配置我们需要的方法
      },
    




    这是啥意思

    01-06
    赞同
    回复 1
    • Dream
      Dream
      01-06
      不好意思,写错了,我改下
      01-06
      回复
登录 后发表内容