微信小程序中wx.request如何实现封装

  介绍

这篇文章将为大家详细讲解有关微信小程序中wx。请求如何实现封装,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

看项目代码时发现了下面几点问题:

<李>

网络请求都写在页面里,每个请求都要重复的写天气。请求以及一些基础配置;

<李>

每个页面里都要处理相同类型的异常;

<李>

后端返的http状态代码为200以外时,并不能直接进入失败对应函数进行处理;

针对这些问题,首先在项目目录里新建了一个API的目录,把所有与API请求的东西都放在这个目录里,如下图这样。

微信小程序中wx.request如何实现封装“> <br/> </p> <p> 1。新建一个请求类,对wx。请求进行简单封装在请求类里做了以下几件事:<br/> </p> <ul类= <李>

在构造函数里创建默认请求的http头,可以在页眉里配制一些内容,在对应请求方法中如果没有设置头参数,就使用此默认头参数;

<李>

以获取删除后放置等方法对请求进行封装,在发起网络请求不需要重复的写wx.request({方法:xxx})这些代码,只要调用getRequest, postRequest等方法就可以了;

<李>

在rquest的结果返回处理函数成功中,判定服务端返回的状态代码,对于200年状态代码的按业务处理成功处理,对于非200的状态码按异常处理。

<李>

预留统一异常处理函数处理接口,可以通过setErrorHandler来设置统一的异常处理,这样对于一些可以统一处理的异常就不用在业务页面里去重复处理了,例如后端返回401年的代码,就可以统一转到登录页面让用户登录了;

<李>

此请求不限定服务提供都,可以是自己开发的业务服务端,也可以用于第三方服务的调用;

/* *   ,*名称:api.js   ,*描述:,请求处理基础类   *大敌;作者:,徐磊   ,*日期:2018-5-19   ,*/class  request  {   ,构造函数(){   this._header 才能=,{}   ,}/* *   ,*设置统一的异常处理   ,*/,setErrorHandler(处理器){   this._errorHandler =,才能处理程序;   ,}/* *   *,才能得到类型的网络请求   ,*/,getRequest (url、,数据,header =, this._header), {   return 才能;this.requestAll (url、,数据,头,,& # 39;得到# 39;)   ,}/* *   *,才能删除类型的网络请求   ,*/,deleteRequest (url、,数据,header =, this._header), {   return 才能;this.requestAll (url、,数据,头,,& # 39;删除# 39;)   ,}/* *   *,才能把类型的网络请求   ,*/,putRequest (url、,数据,header =, this._header), {   return 才能;this.requestAll (url、,数据,头,,& # 39;把# 39;)   ,}/* *   *,才能发布类型的网络请求   ,*/,postRequest (url、,数据,header =, this._header), {   return 才能;this.requestAll (url、,数据,头,,& # 39;文章# 39;)   ,}/* *   *,才能网络请求   ,*/,requestAll (url、,数据,头,,方法),{   return 才能;new 承诺((解决,,拒绝),=祝辞,{   ,,wx.request ({   ,,,url:,网址,   :,,,数据,数据,   ,,,头:,头,   ,,,方法:,方法,   成功,,,:,(res =祝辞,{   ,,,,if  (res.statusCode ===, 200), {   ,,,,,//200:,服务端业务处理正常结束   ,,,,,解决(res)   ,,,,},{else    ,,,,,//其它错误,提示用户错误信息   ,,,,,if  (this._errorHandler  !=, null), {   ,,,,,//如果有统一的异常处理,就先调用统一异常处理函数对异常进行处理   ,,,,,,this._errorHandler (res)   ,,,,,}   ,,,,,拒绝(res)   ,,,,}   ,,,}),   ,,,失败:,(res =祝辞,{   ,,,,if  (this._errorHandler  !=, null), {   ,,,,,this._errorHandler (res)   ,,,,}   ,,,,拒绝(res)   ,,,})   ,,})   })才能   ,}   }      export  default 请求

2。新建一个agriknow类在agriknow里面做了以下几件事:

<李>

实现所有业务服务调用,如查询所有新闻列表【getNews】,查询所有课程列表【getCourseList】;

<李>

实现统一的异常处理,并传给请求;

<李>

将服务端返回的结果反应转成反应。数据回传给API调用的地方,

/* *   ,*名称:agriknow.js   ,*描述:,农知汇服务器提供的服务   *大敌;作者:,徐磊   ,*日期:2018-5-19   ,*/import  request 得到& # 39;。/request.js& # 39;   class  agriknow  {   ,构造函数(){   时间=this._baseUrl 才能;& # 39;https://apis.xxx.xxx.com/dev/apis/train/v1/& # 39;   this._defaultHeader 才能=,{,& # 39;data-tupe& # 39;:, & # 39; application/json # 39;,}   时间=this._request 才能;new 请求   this._request.setErrorHandler才能(this.errorHander)   ,}/* *   *,才能统一的异常处理方法   ,*/,errorHander (res), {   console.error才能(res)   ,}/* *   *,才能查询所有新闻列表   ,*/,getNews (page =, 1, size =, 10), {   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

微信小程序中wx.request如何实现封装