Flyio簡介
公司主營業(yè)務(wù):網(wǎng)站建設(shè)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出錫林郭勒盟免費(fèi)做網(wǎng)站回饋大家。
Fly.js 通過在不同 JavaScript 運(yùn)行時(shí)通過在底層切換不同的 Http Engine來實(shí)現(xiàn)多環(huán)境支持,但同時(shí)對(duì)用戶層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API。不僅如此,F(xiàn)ly.js還支持請(qǐng)求/響應(yīng)攔截器、自動(dòng)轉(zhuǎn)化JSON、請(qǐng)求轉(zhuǎn)發(fā)等功能,詳情請(qǐng)參考:https://github.com/wendux/fly 。
下面我們看看在微信小程序、mpvue中和中如何使用fly.
Flyio 官方地址
文檔
github地址
Flyio的一些特點(diǎn)
fly.js 是一個(gè)基于 promise 的,輕量且強(qiáng)大的Javascript http 網(wǎng)絡(luò)庫,它有如下特點(diǎn):
在小程序中使用flyio請(qǐng)求,封裝代碼如下
一、src下新建utils/request.js文件
var Fly=require("flyio/dist/npm/wx") import { getCache } from '../utils' const request = new Fly() // 全局加載提示 - 設(shè)定時(shí)間 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() // 微信運(yùn)維統(tǒng)計(jì) 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)) } // 錯(cuò)誤提示 if (response.status != 200) { wx.showToast({ title: '出錯(cuò)啦!請(qǐng)稍后再試試哦~', 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'//---開發(fā)調(diào)試環(huán)境 //export const baseUrlApi = 'https://test.mini.com'//---測試環(huán)境https //export const baseUrlApi = 'https://product.mini.com'//---生產(chǎn)環(huán)境https
這個(gè)里面可以寫不同環(huán)境或者調(diào)試的接口地址
三、src下新建service文件夾
在這個(gè)下面不同的模塊簡歷不同的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 }), }
四、接口請(qǐng)求的使用
import loginApi from "@/service/login-service"; methods: { //-登錄 clickLoginBtn() { var data = { phone: '18709090909', password: "123456", }; console.log("登錄參數(shù)==", 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("收藏成功"); } }); } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
新聞標(biāo)題:微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請(qǐng)求
文章轉(zhuǎn)載:http://muchs.cn/article2/ghejoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、網(wǎng)站營銷、移動(dòng)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)