共计 3712 个字符，预计需要花费 10 分钟才能阅读完成。
给大家提供思路，可以借鉴哈，有什么问题可以留言 taro 脚手架后面文章会慢慢讲解更多技巧 https://github.com/wsdo/taro-…
为什么封装
当我们开发小程序的时候，经常会用到 http 请求，当然官方已经提供了请求的接口，但是我们每次请求的时候，可能会加上 token，每次请求都会加上，如果不封装起来，会相当的麻烦，那么又怎么封装呢?
特性
暴露 get 方法
暴露 post 方法
post 自定义 contentType
增加配置文件
token 定义
添加判断状态，记录异常信息
增加异常错误 logError 日志
增加统一日志上报
设计
需要对外暴露接口：get post 参数：url，传输的数据，请求头这样我们可以很方便的使用了
在 /service/ 下新建立一个 api.js
baseOptions 方法
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-…
项目目录
