快捷導(dǎo)航

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

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

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

Flyio簡(jiǎn)介

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ò)庫(kù)，它有如下特點(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'//---測(cè)試環(huán)境https
//export const baseUrlApi = 'https://product.mini.com'//---生產(chǎn)環(huán)境https

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

三、src下新建service文件夾

在這個(gè)下面不同的模塊簡(jiǎn)歷不同的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("收藏成功");
    }
   });
  }
 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: