评论

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

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

5 个评论

  • 第57个民族-上班族
    第57个民族-上班族
    2020-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) => {})

    2020-01-07
    赞同 2
    回复 2
    • 第57个民族-上班族
      第57个民族-上班族
      2020-01-08
      代码中删除了一部分基础参数。。
      2020-01-08
      1
      回复
    • 小肥羊🍊
      小肥羊🍊
      2020-01-09
      你是最棒的
      2020-01-09
      回复
  • 咩咩羊ꦿ゜
    咩咩羊ꦿ゜
    2020-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)
                
            })
        })
    }
    


    2020-01-07
    赞同 1
    回复 2
    • Ruby
      Ruby
      2020-07-18
      请问你的async不会报错吗
      2020-07-18
      回复
    • 咩咩羊ꦿ゜
      咩咩羊ꦿ゜
      2020-11-11回复Ruby
      增强编译勾上
      2020-11-11
      回复
  • 燕项项
    燕项项
    2020-03-16

    楼主,请问你的参数data是如何处理的?

    2020-03-16
    赞同
    回复 1
    • Dream
      Dream
      2020-03-17
      let data = {
          }//data是你要传的参数
      放在这里面,假如你要传id过去
      let data = {
          id:你要传的id
          }
      2020-03-17
      回复
  • 小肥羊🍊
    小肥羊🍊
    2020-01-09

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

    2020-01-09
    赞同
    回复 4
  • 袁述~
    袁述~
    2020-01-07

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

    2020-01-07
    赞同
    回复 1
    • Dream
      Dream
      2020-01-07
      嗯嗯
      2020-01-07
      回复
登录 后发表内容