微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請(qǐng)求

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):

  • 提供統(tǒng)一的 Promise API。
  • 瀏覽器環(huán)境下,輕量且非常輕量 。
  • 支持多種JavaScript 運(yùn)行環(huán)境
  • 支持請(qǐng)求/響應(yīng)攔截器。
  • 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)。
  • 支持切換底層 Http Engine,可輕松適配各種運(yùn)行環(huán)境。
  • 瀏覽器端支持全局Ajax攔截 。
  • H5頁面內(nèi)嵌到原生 APP 中時(shí),支持將 http 請(qǐng)求轉(zhuǎn)發(fā)到 Native。支持直接請(qǐng)求圖片。

在小程序中使用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)

搜索引擎優(yōu)化