评论

如何实现一个简单的http请求的封装

一个简单的http请求封装

好久没发文章了,最近浏览社区看到比较多的请求封装,以及还有在使用原始请求的童鞋。为了减少代码,提升观赏性,我也水一篇吧,希望对大家有所帮助。

默认请求方式,大家每次都这样一些写相同的代码,会不会觉得烦,反正我是觉得头大 😂

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

来,进入正题吧,把这块代码封装下。

首先新建个request文件夹,内含request.js
代码如下:

/**
 * 网络请求封装
 */
import config from '../config/config.js'
import util from '../util/util.js'

// 获取接口地址
const _getPath = path => (config.DOMAIN + path)

// 封装接口公共参数
const _getParams = (data = {}) => {
  const timestamp = Date.now()  //时间戳
  const deviceId = Math.random() //随机数
  const version = data.version || config.version //当前版本号,自定或者取小程序的都行
  const appKey = data.appKey || config.appKey //某个小程序或者客户端的字段区分
  //加密下,防止其他人随意刷接口,加密目前采用的md5,后端进行校验,这段里面的参数你们自定,别让其他人知道就行,我这里就是举个例子
  const sign = data.sign || util.md5(config.appKey + timestamp + deviceId)
  return Object.assign({}, {
    timestamp,
    sign,
    deviceId,
    version,
    appKey
  }, data)
}

// 修改接口默认content-type请求头
const _getHeader = (headers = {}) => {
  return Object.assign({
    'content-type': `application/x-www-form-urlencoded`
  }, headers)
}
// 存储登录态失效的跳转
const _handleCode = (res) => {
  const {statusCode} = res
  const {msg, code} = res.data
  // code为 4004 时一般表示storage里存储的token失效或者未登录
  if (statusCode === 200 && (code === 4004)) {
    wx.navigateTo({
      url: '/pages/login/login'
    })
  }
  return true
}

/**
 * get 请求, post 请求
 * @param {String} path 请求url,必须
 * @param {Object} params 请求参数,可选
 * @param {String} method 请求方式 默认为 POST
 * @param {Object} option 可选配置,如设置请求头 { headers:{} }
 *
 * option = {
 *  headers: {} // 请求头
 * }
 *
 */

export const postAjax = (path, params) => {
  const url = _getPath(path)
  const data = _getParams(params)
  // 处理请求头,加上最近比较流行的jwtToken(具体的自己百度去)
  const header = util.extend(
    true, {
    "content-type": "application/x-www-form-urlencoded",
    'Authorization': wx.getStorageSync('jwtToken') ? `Bearer ${wx.getStorageSync('jwtToken')}` : '',
  },
    header
  );
  const method = 'POST'
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      data,
      header,
      success: (res) => {
        const result = _handleCode(res)
        result && resolve(res.data)
      },
      fail: function (res) {
        reject(res.data)
      }
    });
  })
}

那么如何调用呢?

//把request的 postAjax注册到getApp()下,调用时:
const app = getApp()
let postData = {
  //这里填写请求参数,基础参数里的appKey等参数可在这里覆盖传入。
}
app.postAjax(url, postData).then((res) => {
    if (res.success) {
    //这里处理请求成功逻辑。
    } else {
    //wx.showToast大家觉得麻烦也可以写到util.js里,调用时:util.toast(msg) 即可。
      wx.showToast({
        title: res.msg || '服务器错误,请稍后重试',
        icon: "none"
      })
    }
}).catch(err => {
 //这里根据自己场景看是否封装到request.js里
   console.log(err)
})

config.js 主要是处理正式环境、预发环境、测试环境、开发环境的配置

//发版须修改version, env
const env = {
  dev: {
    DOMAIN: 'https://dev-api.weixin.com'
  },
  test: {
    DOMAIN: 'https://test-api.weixin.com',
  },
  pro: {
    DOMAIN: 'https://api.qtshe.com'
  }
}
module.exports = {
  ...env.pro
}

以上就是简单的一个request的封装,包含登录态失效统一跳转、包含公共参数的统一封装。

老规矩,最后放代码片段,util里内置了md5方法以及深拷贝方法,具体的我也不啰嗦,大家自行查看即可~

https://developers.weixin.qq.com/s/gbPSLOmd7Aft
最后一次编辑于  03-13  
点赞 7
收藏
评论

4 个评论

  • 陈
    03-13

    老规矩,先占楼

    03-13
    赞同 2
    回复 1
  • undefined
    undefined
    03-13

    小机灵鬼

    03-13
    赞同 1
    回复 1
  • 鹤仙姑
    鹤仙姑
    03-14
    一天内社区第二篇,点赞,收藏
    03-14
    赞同
    回复
  • 拾忆
    拾忆
    03-13

    今天好像看到有人发过class封装的http

    03-13
    赞同
    回复 3
登录 后发表内容