php小程序开发完整教程_微信小程序request封装
大家好,又见面了,我是你们的朋友全栈君。
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;
}
好了,内容到这里就结束了,希望对需要的人有帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/196051.html原文链接:https://javaforall.cn
相关文章
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- 【说站】php.ini中屏蔽所有错误的方法
- PHP goto:跳转到程序的指定位置
- PHP声明参数类型
- 【PHP释放MySQL的威力】(php释放mysql)
- PHP无法连接MySQL数据库解决办法(php连接不到mysql)
- Linux系统下安装PHP的指南(linux怎么安装php)
- 技术实现的网络系统PHP和MySQL结合:搭建网络系统的利器.(基于php和mysql)
- MySQL指令的灵活执行:PHP的强大助力(php执行mysql)
- 7.4Linux 发布 PHP 7.4 平台更新(linux发布php)
- PHP轻松构建高效应用——Redis实战指南(redis使用php)
- PHP轻松访问MySQL数据:使用简明易懂的方法获取数据(php获取mysql数据)
- PHP与MSSQL:高效开发数据驱动应用程序(php与mssql)
- MySQL PHP长连接:持久化提升应用性能(mysql php长连接)
- PHP实现MSSQL数据库的连接(php与mssql连接)
- PHP简易指南:连接MySQL数据库(php连接mysql数据库)
- PHP框架下的Redis应用实现(用php redis)
- 用PHP实现Redis缓存一个实例(redis缓存实例php)
- php和js交互一例-PHP教程,PHP应用
- linux下安装apache与php;Apache+PHP+MySQL配置攻略
- PHP和Mysqlweb应用开发核心技术第1部分Php基础-1开始了解php
- PHP学习散记_编码(json_encode中文不显示)
- javascript中直接写php代码的方法
- 使用js判断数组中是否包含某一元素(类似于php中的in_array())
- 在PHP中使用X-SendFile头让文件下载更快