美文网首页
微信小程序--接口封装(mpvue使用wx.request封装请

微信小程序--接口封装(mpvue使用wx.request封装请

作者: 七號7777 | 来源:发表于2019-10-28 17:30 被阅读0次

    1.创建src下创建utils/wx-request.js

    const host = 'https://rmall.ukelink.net' //写自己的域名
     
    function request (url, method, data, header = {}) {
      wx.showLoading({
        title: '加载中' // 数据请求前loading
      })
      return new Promise((resolve, reject) => {
        wx.request({
          url: host + url, // 仅为示例,并非真实的接口地址
          method: method,
          data: data,
          headers: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            wx.hideLoading()
            resolve(res.data)
          },
          fail: function (res) {
            wx.hideLoading()
            // reject(false)
          },
          complete: function () {
            wx.hideLoading()
          }
        })
      })
    }
     
    function get (obj) {
      return request(obj.url, 'GET', obj.data)
    }
     
    function post (obj) {
      return request(obj.url, 'POST', obj.data)
    }
     
    export default {
      request,
      get,
      post,
      host
    }
    

    2.main.js中引入到原型

    import WXrequest from './utils/wx-request'
    Vue.prototype.$httpWX = WXrequest
    

    3.使用

    this.$httpWX.post({
          url: '/mms/country/queryValidZoneListForMallHome',
          data: {
            'categoryType': 'SaleGoodsType@sim',
            'streamNo': 'web_bss153570682909641893',
            'reqSource': 'MALL_H5',
            'appid': 'string',
            'timestamp': 1535706829096,
            'sign': 'string'
          }
    }).then(res => {
          console.log(res)
    })
    

    注:参考链接https://www.cnblogs.com/wnsry/p/10038388.html

    相关文章

      网友评论

          本文标题:微信小程序--接口封装(mpvue使用wx.request封装请

          本文链接:https://www.haomeiwen.com/subject/ogqmyctx.html