php小程序开发完整教程_微信小程序request封装

php小程序开发完整教程_微信小程序request封装flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。flyio官方文档flyio下载地址原生微信小程序中使用flyio请求,封装代码如下一、在src/utils下新建request.js文件,文件代码如下:/*flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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;
	}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/196051.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • sqlyog community_sqlyog10.0安装教程

    sqlyog community_sqlyog10.0安装教程sqlyog社区版是一款十分不错的MySQL数据库管理工具,它可以帮助用户们十分快速的去管理自己的数据库,所以喜欢的话,就来下载试试吧!软件介绍SQLyog是一个简洁高效功能强大的,GUI图形化用户管理接口的MySQL数据库管理工具它可以让您从世界的任何角落透过网络来维护远端的MySQL数据库。sqlyog社区版的tabbed界面可进行重新排序,更快的键盘操作快捷方式,新增FORM视图选项(…

    2022年9月16日
    1
  • mac用鼠标滚轮滚动方向相反_macbook触控板怎么滚动

    mac用鼠标滚轮滚动方向相反_macbook触控板怎么滚动iPad用习惯了以后,在Mac上也喜欢把触控板的双指滑动滚动方向设成“自然”模式,但是鼠标滚轮的滚动方向也随之反过来了。估计很多苹果电脑用户和我一样希望触控板和鼠标滚动方向相反……你可以试

    2022年8月1日
    4
  • 卡尔曼滤波应用及其matlab实现

    卡尔曼滤波应用及其matlab实现线性卡尔曼滤波卡尔曼滤波在温度测量中的应用X(k)=A*X(k-1)+T*W(k-1)Z(k)=H*X(k)+V(k)房间温度在25摄氏度左右,测量误差为正负0.5摄氏度,方差0.25,R=0.25。Q=0.01,A=1,T=1,H=1。假定快时刻的温度值、测量值为23.9摄氏度,房间真实温度为24摄氏度,温度计在该时刻测量值为24.5摄氏度,偏差为0.4摄氏度。利用k-1…

    2022年6月29日
    49
  • hadoop hdfs命令_hadooplinux命令

    hadoop hdfs命令_hadooplinux命令概述所有的HDFS命令都调用bin/hdfs脚本文件,如果运行hdfs脚本没有带任何参数的话,则打印所有命令的描述。 使用:hdfs[SHELL_OPTIONS]COMMAND[GENERIC_OPTIONS][COMMAND_OPTIONS]Hadoop是一个参数解析框架,采用解析泛型选项以及运行类。命令参数 描述 –config–loglevel …

    2022年10月4日
    0
  • BP神经网络原理及matlab实例

    BP神经网络原理及matlab实例转载:http://blog.csdn.net/u013007900/article/details/50118945上一次我们讲了M-P模型,它实际上就是对单个神经元的一种建模,还不足以模拟人脑神经系统的功能。由这些人工神经元构建出来的网络,才能够具有学习、联想、记忆和模式识别的能力。BP网络就是一种简单的人工神经网络。 本文具体来介绍一下一种非常常见的神经网络模型——反

    2022年7月20日
    13
  • DCL之单例模式_实现一个单例模式

    DCL之单例模式_实现一个单例模式DoubleCheckLock

    2025年6月9日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号