大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

flyio:

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。
可以让您在多个端上尽可能大限度的实现代码复用。
flyio官方文档
flyio下载地址

原生微信小程序中使用flyio请求，封装代码如下

一、在src/utils下新建request.js文件，文件代码如下：

/*flyio: 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。 可以让您在多个端上尽可能大限度的实现代码复用。 */
/**配置fly 请求体 */
//引入下载的源码文件
const Fly = require("./fly/dist/npm/wx")
const fly =new Fly()//创建fly实例 
import { 
doLogin} from '../utils/wechat'
//设置超时时间
fly.config.timeout = 60000
//获取白名单
import whiteList from './whiteList'
//添加请求拦截器
fly.interceptors.request.use((request) => { 

wx.showLoading({ 

title: '加载中',
'mask': true
})
//不显示加载中页面的接口
if(whiteList.loading.indexOf(request.url) == -1){ 
//indexOf()如果要检索的字符串值没有出现，则该方法返回 -1
//隐藏loading遮罩
wx.hideLoading();
}
//默认加入3rd_session
let third_session = wx.getStorageSync("third_session");
if(!third_session){ 
//不存在third_session，重新登录
request.body['third_session'] = '';
}else{ 

request.body['third_session'] = third_session;
}
request.params = request.body;
request.headers['Content-Type'] = 'application/json;charset=utf-8';
console.log("request.body:"+JSON.stringify(request.body));
return request;
});
//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use((response, promise) => { 

console.log("response",response)
wx.hideLoading()
switch(response.data.returnCode){ 

case 200: //正常
break;
case 400: //后台自定义错误
wx.showToast({ 

title:response.data.msg,
icon: 'none',
duration: 2000
})
break;
case 401: //pp_session过期 
//重新静默登录获取code
wx.removeStorageSync('loginFlag')
doLogin()
break;
case 403: //登录状态失效 
wx.removeStorageSync('loginFlag')
wx.showToast({ 

title:'登录状态丢失，请重新登录',
icon: 'none'
})
//跳转登录页面
wx.navigateTo({ 

url: '/pages/login/login',
})  
break;
case 500: //服务器错误
wx.showToast({ 

title:'服务器错误，请稍后重试',
icon: 'none'
})
break;
default:    
}
return promise.resolve(response.data)
},(err, promise) => { 

wx.hideLoading()
wx.showToast({ 

title:'网络错误，请检查网络后重试',
icon: 'none'
})
return promise.resolve()
})
export default fly

二、在src/utils下新建api.js文件

api.js文件中，引入 request.js: import fly from ‘./request.js’,然后调用fly 的封装的请求方法，最后 export default api，以为其他页面调用。代码如下：

//业务api
import fly from './request.js'
const baseURL = 'http://192.168.0.77:8083'//测试环境 http
const api ={ 
 
baseURL: baseURL,
//code换取session
code2Session:(code) => fly.post('/wx/code2Session',{ 

wx_code:code                
},{ 

baseURL: baseURL
}),
//登录或注册
loginOrRegister:(data) => fly.post('/wx/loginOrRegister',data,{ 

baseURL: baseURL
}),
//获取用户基本信息
getUserInfo:() => fly.get('/user/getUserInfo',{ 

},{ 

baseURL: baseURL
}),
//获取图片列表信息
getImgList:(pageNum,paseSize) => fly.post('/img/getImgList',{ 

pageNum:pageNum,paseSize:paseSize
},{ 

baseURL: baseURL
})
}
//获取图片详情信息
export function getImgDetail(query){ 

return fly.request({ 

baseURL: baseURL,
url: '/img/getImgDetail?id='+query,
method: 'get'
})
}
//添加图片信息
export function addImg(data){ 

return fly.request({ 

baseURL: baseURL, 
url: '/img/addImg',
method: 'post',
body: data,
params: data, //可自定义配置项
})
}
export default api

三、接口的使用

1.在 js页面引入api ： import api from ‘…/…/utils/api’
2.调用 api.js中 export的方法
3.示例：

// pages/my/my.js
//获取应用实例
const app = getApp()
import api from '../../utils/api'
Page({ 

/** * 页面的初始数据 */
data: { 

userInfo: { 
},
},
/** * 生命周期函数--监听页面显示 */
onShow: function () { 

//请求第三方服务器API获取用户基本信息
this.getUserInfo()
},
//获取用户信息
getUserInfo(){ 

api.getUserInfo().then(res =>{ 

console.log("getUserInfo",res)
if(res.returnCode == 200){ 

let userInfo = res.data
this.setData({ 

userInfo: userInfo
})
}
})
},
})

注意事项

1.flyio API 文档 简单总结与注意事项

2.小程序中 api.js 中 方法请求参数问题：
由于使用flyio封装wx.request请求，请求参数自动填加到 request请求体的body中，服务器后台获取参数方法受限，get请求参数获取正常；post请求报异常，需要特殊处理，比较麻烦（使用常规方法获取参数，第一次正常，第二次报异常），解决方法：

使用flyio封装时，把请求参数（request请求体的body内容） 赋值给 request请求体的params，服务后台 get请求 和
post请求 ，处理参数的方法一致采用 处理get请求参数的方法。

处理get请求参数的方法：

request.getParameter()
或request.getParameterMap()

request.js中：

服务器后台代码（获取请求参数，转map）：

/** * 处理get请求参数： * get请求主要使用ParameterMap进行获取请求参数集合 * @param request * @return */
public static Map<String, Object> getMethod(HttpServletRequest request) { 

Map<String, Object> resultMap = new HashMap<String, Object>();
Map<String, String[]> properties = request.getParameterMap();//把请求参数封装到Map<String, String[]>中
//iterator:迭代器
Iterator<Entry<String, String[]>> iterator=properties.entrySet().iterator();
String name ="";
String value ="";
//遍历
while(iterator.hasNext()){ 

Entry<String, String[]> entry = iterator.next();
name=entry.getKey();
Object valueObject = entry.getValue();
if(null == valueObject){ 

value ="";
}else if(valueObject instanceof String[]){ 

String[] values=(String[]) valueObject;
for(int i=0; i<values.length; i++){ 

value = values[i]+",";
}
value = value.substring(0, value.length()-1);//去除最后一个逗号
}else{ 

value = valueObject.toString();//用于请求参数中请求参数名唯一
}
resultMap.put(name, value);
}
return resultMap;
}

好了，内容到这里就结束了，希望对需要的人有帮助。