Flyio簡介
Fly.js 通過在不同 JavaScript 運行時通過在底層切換不同的 Http Engine來實現多環境支持，但同時對用戶層提供統一、標準的Promise API。不僅如此，Fly.js還支持請求/響應攔截器、自動轉化JSON、請求轉發等功能，詳情請參考：https://github.com/wendux/fly 。
下面我們看看在微信小程序、mpvue中和中如何使用fly.
Flyio 官方地址
文檔
github地址
Flyio的一些特點
fly.js 是一個基于 promise 的，輕量且強大的Javascript http 網絡庫，它有如下特點：
在小程序中使用flyio請求，封裝代碼如下
一、src下新建utils/request.js文件
var Fly=require("flyio/dist/npm/wx")
import { getCache } from '../utils'
const request = new Fly()
// 全局加載提示 - 設定時間
let ltime = 0;
function closeLoading(param) {
ltime--
}
request.interceptors.request.use((request) => {
// 全局加載提示 - 展示提示
// wx.showNavigationBarLoading()
ltime++
let dataSource = getCache("dataSource")
request.headers = {
"Content-Type": "application/x-www-form-urlencoded",
"source": "miniApp",
"dataSource": dataSource ? dataSource : ''
}
// 沒用到
if (request.url.indexOf('getReviewInfo') != -1) {
closeLoading()
return request
}
// 登錄
console.log('這是token');
console.log();
let type = '';
if(request.url.indexOf("wxLogin") != -1) {
type = request.body.loginType;
}
console.log(getCache("token"));
console.log('這是token');
if (request.url.indexOf("wxLogin") == -1 || type == 'WORKBENCH') {
// let storeId = getCache("storeId");
let storeCode = getCache("storeCode");
let inviter = getCache("inviter");
let token = getCache("token");
request.headers = {
"Content-Type": "application/x-www-form-urlencoded",
"source": "miniApp",
"token": token,
"storeCode": storeCode,
"inviter": inviter
}
console.log('打印request');
console.log(request);
console.log('打印request');
let dataSource = getCache("dataSource")
if (dataSource) {
request.headers['dataSource'] = dataSource
}
}
return request
})
request.interceptors.response.use((response, promise) => {
closeLoading()
// wx.hideNavigationBarLoading()
// 微信運維統計
if (response.status) {
wx.reportMonitor('0', +(response.status))
}
if (response.headers.date) {
let time = new Date().getTime() - new Date(response.headers.date).getTime()
wx.reportMonitor('1', +(time))
}
// 錯誤提示
if (response.status != 200) {
wx.showToast({
title: '出錯啦！請稍后再試試哦～',
icon: 'none',
duration: 2000
})
}
return promise.resolve(response.data)
},
(err, promise) => {
wx.hideNavigationBarLoading()
return promise.resolve()
}
)
export default request
二、src下新建utils/api.js文件
export const baseUrlApi = 'http://192.168.128.242:8080'//---開發調試環境 //export const baseUrlApi = 'https://test.mini.com'//---測試環境https //export const baseUrlApi = 'https://product.mini.com'//---生產環境https
這個里面可以寫不同環境或者調試的接口地址
三、src下新建service文件夾
在這個下面不同的模塊簡歷不同的js文件，例如：login-service.js，order-service.js
里面代碼示例如下
import { baseUrlApi } from '../utils/api'
import request from '../utils/request'
export default {
// 登錄
wxLogin: (data) =>
request.post(`/store-miniApp-web/external/interface/wechat/wxLogin`, data, { baseURL: baseUrlApi }),
// 收藏
addCollect: (goodId, status) =>
request.get(`/store-miniApp-web/store/member/addCollect?goodId=${goodId}&status=${status}`,
null, {
baseURL: baseUrlApi
}),
}
四、接口請求的使用
import loginApi from "@/service/login-service";
methods: {
//-登錄
clickLoginBtn() {
var data = {
phone: '18709090909',
password: "123456",
};
console.log("登錄參數==", data);
loginApi.wxLogin(data).then(
data => {
if (!data) {
this.$toast(data.msg);
return;
}
if (data.code==0) {
console.log("登錄成功", data);
}
},
err => {
}
);
},
//-收藏
collect() {
let isCollect = "1"; //1收藏 0取消
let goodId = "4343434";
loginApi.addCollect(goodsId, isCollect).then(data => {
if (data.code != 0) {
console.log("收藏失敗", data);
return;
}
if (isCollect == 1) {
this.$toast("取消成功");
} else {
this.$toast("收藏成功");
}
});
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
