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

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

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

Flyio簡介

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

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

Flyio 官方地址

文檔

github地址

Flyio的一些特點

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

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

在小程序中使用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()
    // 微信運維統(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ā)調試環(huán)境
//export const baseUrlApi = 'https://test.mini.com'//---測試環(huán)境https
//export const baseUrlApi = 'https://product.mini.com'//---生產環(huán)境https

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

三、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("收藏成功");
    }
   });
  }
 }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: