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;
	}

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

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