導語
上一篇文章微信小程式搭建mpvue+vant已經介紹瞭如何搭起mpvue專案及引入vant，本篇文章繼續在它的基礎上，引入flyio，並做一些封裝，目的是為了在小程式發起請求。
這時讀者會有些疑問，小程式已經有了request，為什麼還用flyio？這不是造輪子嗎？我是這麼想的，其實現在不管是mpvue，還是wepy都好像還不能完美編譯出微信小程式和h5版本。為了以後應對老闆有建立h5版本的想法，我們應該為以後複用小程式程式碼做好準備工作。既然h5也會有ajax，flyio也支援小程式和h5的，所以乾脆把flyio引進來，再做一些封裝，兩邊都能用，豈不美哉？
文章末尾，附文章教程步驟建立的專案mpvue+vant+flyio,需要學習的同學，拿走不謝。
第一步：將flyio加入專案
我的專案路徑：/Users/hrz/myworkspace/lawyer-card-wxss
$ cd /Users/hrz/myworkspace/lawyer-card-wxss
$ cnpm i flyio -S --production
複製程式碼第二步：二次封裝
建立api資料夾，並在下面新建兩個檔案api.js，httpRequest.js
api.js 用來給各頁面呼叫，是一個彙總各類ajax方法的集合
import requestService from './httpRequest'
const PROD_SERVICE = 'https://我的線上產品域名/lawyer-card-service'
const DEV_SERVICE = 'http://localhost:8081/lawyer-card-service'
/**
* 根據開發環境返回介面url
* @returns {string}
*/
function getSerive () {
if (process.env.NODE_ENV === 'production') {
return PROD_SERVICE
} else {
return DEV_SERVICE
}
}
/** wx.request服務封裝 */
export default {
/**
* 檢查微信Token是否還生效
* @param data
* @param callBack
*/
checkToken (data, callBack, failCallBack) {
requestService.sendRequest().url(getSerive() + '/auth/checkToken').method('GET').data(data).success(res => {
callBack(res)
}).fail(res => {
failCallBack(res)
}).send()
}
}
複製程式碼httpRequest.js是對flyio對二次封裝，是ajax的核心
import {getStorageSync, hideLoading, showLoading, showNotify} from '../utils/index'
var Fly = require('flyio/dist/npm/wx')
var fly = new Fly()
// 設定超時
fly.config.timeout = 7000
// 新增請求攔截器
fly.interceptors.request.use((request) => {
// 給所有請求新增自定義header
const token = getStorageSync('token')
request.headers['token'] = token
return request
})
/**
* request服務封裝
*/
export default {
sendRequest
}
function sendRequest () {
return {
_sucCallback: null,
_failCallback: null,
_method: 'GET',
_data: {},
_header: {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'},
_url: '',
send: function () {
showLoading({
title: '載入中...'
})
fly.request(this._url, this._data, {
method: this._method,
headers: this._header
})
.then(res => {
hideLoading()
let error = httpHandlerError(res, this._failCallback)
if (error) return
this._sucCallback(res)
})
.catch((res) => {
hideLoading()
httpHandlerError(res, this._failCallback)
})
return this
},
success: function (callback) {
this._sucCallback = callback
return this
},
fail: function (callback) {
this._failCallback = callback
return this
},
url: function (url) {
this._url = url
return this
},
data: function (data) {
this._data = data
return this
},
method: function (method) {
this._method = method
return this
},
header: function (header) {
this._header = header
return this
}
}
}
/**
* info 請求完成後返回資訊
* callBack 回撥函式
* errTip 自定義錯誤資訊
*/
function httpHandlerError (info, callBack) {
hideLoading()
/** 請求成功，退出該函式 可以根據專案需求來判斷是否請求成功。這裡判斷的是status為200的時候是成功 */
let haveError = true
let errTip
if (info.status === 200) {
if (info.data.code === undefined) {
haveError = true
} else if (info.data.code === 'success' || info.data.code === 0) {
haveError = false
} else {
haveError = true
errTip = info.data.msg
}
} else {
errTip = '網路請求出現了錯誤【' + info.status + '】'
haveError = true
}
if (haveError) {
/** 發生錯誤資訊時，如果有回撥函式，則執行回撥 */
if (callBack) {
callBack(info)
} else {
showNotify(errTip)
}
}
return haveError
}
複製程式碼大家看到，httpRequest.js裡引用一些工具類，其實裡面主要是一些載入的提示，及彈框。為什麼我要把他放在工具類裡？正如我最開頭導語說的，為了方便以後應對h5版本，H5版本的載入、彈框、操作快取和小程式的程式碼不一樣，所以我統一放在工具類裡管理了，以後要做h5開發，我只要改工具類就行了。下面是小程式裡工具類的程式碼。
import Notify from 'vant-weapp/dist/notify/notify'
/**
* 顯示頂部紅色通知
* 使用方法：呼叫時確保介面上有：
* <van-notify id="van-notify"/>
* @param msg
* @param showTime
*/
export function showNotify (msg, showTime) {
if (!showTime) {
showTime = 3000
}
Notify({
text: msg,
duration: showTime
})
}
/**
* 從快取裡獲取資料
* @param key
* @return value
*/
export function getStorageSync (key) {
return wx.getStorageSync(key)
}
/**
* 顯示載入中
* @param data
*/
export function showLoading (data) {
wx.showLoading(data)
}
/**
* 隱藏載入中
*/
export function hideLoading () {
wx.hideLoading()
}
/**
* 將資料儲存到快取
* @param key
* @param value
*/
export function setStorageSync (key, value) {
wx.setStorageSync(key, value)
}
export default {
getStorageSync,
setStorageSync,
showLoading,
hideLoading,
showNotify
}
複製程式碼第三步：寫個Demo傳送請求
<template>
<div>
{{msg}}
</div>
</template>
<script>
import Api from '../../apis/api'
export default {
data () {
return {
msg: null
}
},
methods: {},
onLoad () {
let that = this
let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTU0MjA0NDI0LCJleHAiOjE1NTQ4MDkyMjR9.VdlhGXOxIA97_G_u_a3GJxmWdD9t_jb_a1aodTJ75ESNgxchx8M0mRBSx-s_er8Da4MzZY1zBW4UfY5ELC9fgA'
Api.checkToken({'token': token}, function (res) {
console.log(res)
that.msg = res.data.msg
})
}
}
</script>
<style scoped>
</style>
複製程式碼執行npm run dev起來，去小程式開發工具看效果
已經成功傳送請求，還是不錯的！
我建立了名字為mpvue-vant-flyio專案，除了專案名稱不同，步驟都是相同的。專案原始碼