微信小程序封装网络请求

由于前后端分离,所以前端很多地方需要请求后台数据!为了简约代码和提高复用性所以我们去封装了一些方法,

// 请求封装

const baseUrl = "需要的网络地址"

const http = ({

  url = '',

  param = {},

  method = ""

} = {}) => {

  wx.showLoading({

    title: '请求中,请耐心等待..'

  });

  // let timeStart = Date.now();

  return new Promise((resolve, reject) => {

    wx.request({

      url: getUrl(url),

      data: param,

      method: method,

      header: {

        'content-type': 'application/x-www-form-urlencoded' // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"

      },

      complete: (res) => {

        wx.hideLoading();

        // console.log(`耗时${Date.now() - timeStart}`);

        if (res.statusCode >= 200 && res.statusCode < 300) {

          resolve(res.data)

        } else {

          reject(res)

        }

      }

    })

  })

}

const getUrl = (url) => {

  if (url.indexOf('://') == -1) {

    url = baseUrl + url;

  }

  return url

}

// get方法

const _get = (url, param = {}) => {

  return http({

    url,

    param,

    method: 'get'

  })

}

// post方法

const _post = (url, param = {}) => {

  return http({

    url,

    param,

    method: 'POST'

  })

}

const _put = (url, param = {}) => {

  return http({

    url,

    param,

    method: 'put'

  })

}

const _delete = (url, param = {}) => {

  return http({

    url,

    param,

    method: 'put'

  })

}

2.现在方法写入全局, 但是全局的方法需要去暴露它

module.exports = {

  baseUrl,

}

3。页面上的引用

const api = require('你方法的位置');

api._post('后台的地址', {}).then(res => {

      console.log(res) //后台返回的数据


    }).catch(e => {

      console.log(e)

    })

你可能感兴趣的:(微信小程序封装网络请求)