小程序公共封装ajax,微信小程序中如何使用flyio封装网络请求

Flyio简介

Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持，但同时对用户层提供统一、标准的Promise API。不仅如此，Fly.js还支持请求/响应拦截器、自动转化JSON、请求转发等功能，详情请参考：https://github.com/wendux/fly 。

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

Flyio 官方地址

Flyio的一些特点

fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

提供统一的 Promise API。

浏览器环境下，轻量且非常轻量 。

支持多种JavaScript 运行环境

支持请求／响应拦截器。

自动转换 JSON 数据。

支持切换底层 Http Engine，可轻松适配各种运行环境。

浏览器端支持全局Ajax拦截 。

H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 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()

// 微信运维统计

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'//---开发调试环境

//export const baseUrlApi = 'https://test.mini.com'//---测试环境https

//export const baseUrlApi = 'https://product.mini.com'//---生产环境https

这个里面可以写不同环境或者调试的接口地址

三、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("登录参数==", 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("收藏成功");

}

});

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。