給大家提供思路，可以借鑑哈，有什麼問題可以留言 taro腳手架後面文章會慢慢講解更多技巧 github.com/wsdo/taro-k…
為什麼封裝
當我們開發小程式的時候，經常會用到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')
}
}
複製程式碼全部程式碼
如果能幫到你幫忙點個 star github.com/wsdo/taro-k…