快捷導(dǎo)航

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

更新時間：2019年07月03日 11:35:03 作者：奮斗的七月

這篇文章主要介紹了微信小程序中如何使用flyio封裝網(wǎng)絡(luò)請求，F(xiàn)ly.js 通過在不同 JavaScript 運(yùn)行時通過在底層切換不同的 Http Engine來實(shí)現(xiàn)多環(huán)境支持，但同時對用戶層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API,需要的朋友可以參考下

Flyio簡介

Fly.js 通過在不同 JavaScript 運(yùn)行時通過在底層切換不同的 Http Engine來實(shí)現(xiàn)多環(huán)境支持，但同時對用戶層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API。不僅如此，F(xiàn)ly.js還支持請求/響應(yīng)攔截器、自動轉(zhuǎn)化JSON、請求轉(zhuǎn)發(fā)等功能，詳情請參考：https://github.com/wendux/fly 。

下面我們看看在微信小程序、mpvue中和中如何使用fly.

Flyio 官方地址

文檔

github地址

Flyio的一些特點(diǎn)

fly.js 是一個基于 promise 的，輕量且強(qiáng)大的Javascript http 網(wǎng)絡(luò)庫，它有如下特點(diǎn)：

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

在小程序中使用flyio請求，封裝代碼如下

一、src下新建utils/request.js文件

var Fly=require("flyio/dist/npm/wx") 
import { getCache } from '../utils'
const request = new Fly()
// 全局加載提示 - 設(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)計
    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'//---開發(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

這個里面可以寫不同環(huán)境或者調(diào)試的接口地址

三、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("登錄參數(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: