【小程序taro最佳实践】http请求封装（方便使用，增加token，统一错误日志记录和上报）

给大家提供思路，可以借鉴哈，有什么问题可以留言taro脚手架后面文章会慢慢讲解更多技巧https://github.com/wsdo/taro-…为什么封装当我们开发小程序的时候，经常会用到http请求，当然官方已经提供了请求的接口，但是我们每次请求的时候，可能会加上token，每次请求都会加上，如果不封装起来，会相当的麻烦，那么又怎么封装呢?特性暴露get方法暴露post方法post自定义contentType增加配置文件token定义添加判断状态，记录异常信息增加异常错误logError日志增加统一日志上报设计需要对外暴露接口：get post参数：url，传输的数据，请求头这样我们可以很方便的使用了在/service/下新建立一个api.jsbaseOptions 方法baseOptions(params, method = ‘GET’) { let { url, data } = params let contentType = ‘application/x-www-form-urlencoded’ contentType = params.contentType || contentType const option = { isShowLoading: false, url: base + url, data: data, method: method, header: { ‘content-type’: contentType, ’token’: token }, // 默认contentType ,预留token success(res) { }, error(e) { logError(‘api’, ‘请求接口出现问题’, e) } } return Taro.request(option) },get方法 get(url, data = ‘’) { let option = { url, data } return this.baseOptions(option) },post 方法增加了contentType 不同的后端框架会要求不同的请求头部 post: function (url, data, contentType) { let params = { url, data, contentType } return this.baseOptions(params, ‘POST’) }这样我们就可以很方便在action里面使用了import api from ‘../service/api’api.get(’news/list’, params)添加判断状态export const HTTP_STATUS = { SUCCESS: 200, CLIENT_ERROR: 400, AUTHENTICATE: 401, FORBIDDEN: 403, NOT_FOUND: 404, SERVER_ERROR: 500, BAD_GATEWAY: 502, SERVICE_UNAVAILABLE: 503, GATEWAY_TIMEOUT: 504}配置export const base = “https://api.github.com/repos/"增加异常错误logError日志export const logError = (name, action, info) => { if (!info) { info = ’empty’ } try { let deviceInfo = wx.getSystemInfoSync() // 这替换成 taro的 var device = JSON.stringify(deviceInfo) } catch (e) { console.error(’not support getSystemInfoSync api’, err.message) } let time = formatTime(new Date()) console.error(time, name, action, info, device) // 如果使用了 第三方日志自动上报 // if (typeof action !== ‘object’) { // fundebug.notify(name, action, info) // } // fundebug.notifyError(info, { name, action, device, time }) if (typeof info === ‘object’) { info = JSON.stringify(info) }配合使用import { HTTP_STATUS } from ‘../const/status’import { base } from ‘./config’import { logError } from ‘../utils’ baseOptions(params, method = ‘GET’) { let { url, data } = params // let token = getApp().globalData.token // if (!token) login() console.log(‘params’, params) let contentType = ‘application/x-www-form-urlencoded’ contentType = params.contentType || contentType const option = { isShowLoading: false, loadingText: ‘正在加载’, url: base + url, data: data, method: method, header: { ‘content-type’: contentType, ’token’: token }, success(res) { if (res.statusCode === HTTP_STATUS.NOT_FOUND) { return logError(‘api’, ‘请求资源不存在’) } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) { return logError(‘api’, ‘服务端出现了问题’) } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) { return logError(‘api’, ‘没有权限访问’) } else if (res.statusCode === HTTP_STATUS.SUCCESS) { return res.data } }, error(e) { logError(‘api’, ‘请求接口出现问题’, e) } } return Taro.request(option) },最终版本import Taro from ‘@tarojs/taro’import { HTTP_STATUS } from ‘../const/status’import { base } from ‘./config’import { logError } from ‘../utils’const token = ‘’export default { baseOptions(params, method = ‘GET’) { let { url, data } = params // let token = getApp().globalData.token // if (!token) login() console.log(‘params’, params) let contentType = ‘application/x-www-form-urlencoded’ contentType = params.contentType || contentType const option = { isShowLoading: false, loadingText: ‘正在加载’, url: base + url, data: data, method: method, header: { ‘content-type’: contentType, ’token’: token }, success(res) { if (res.statusCode === HTTP_STATUS.NOT_FOUND) { return logError(‘api’, ‘请求资源不存在’) } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) { return logError(‘api’, ‘服务端出现了问题’) } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) { return logError(‘api’, ‘没有权限访问’) } else if (res.statusCode === HTTP_STATUS.SUCCESS) { return res.data } }, error(e) { logError(‘api’, ‘请求接口出现问题’, e) } } return Taro.request(option) }, get(url, data = ‘’) { let option = { url, data } return this.baseOptions(option) }, post: function (url, data, contentType) { let params = { url, data, contentType } return this.baseOptions(params, ‘POST’) }}全部代码如果能帮到你帮忙点个 starhttps://github.com/wsdo/taro-…项目目录