微信小程序封装公用的Http请求方法，并解析Promise对象

微信小程序目录结构

首先介绍一下微信小程序的目录结构

上图就是初始化小程序后，最初的目录结构了。
一共有 *.js , *.json , *.wxml , *.wxss 这几种类型的文件，以及pages，utils两个文件夹。依次给大家介绍。

1. JS文件 : 存放以页面为单位的小程序方法、初始化的数据、组件事件的文件。
2. JSON文件： 存放以页面为单位的页面属性，例如：页面的导航栏标题，icon等设置。
3. WXML文件：存放页面元素，标签的文件，类似于H5的 .html 结尾的文件。
4. WXSS文件： 存放页面样式的文件，类似于CSS。
5. Page文件夹： 存放页面文件相关的文件夹，例如js，json，wxml，wxss。
6. Utils文件夹： 存放工具类的文件夹

除了这些文件外，还有最外层的app.js , app.json,app.wxss三个文件

1. app.js：存放全局公用的JS方法。
2. app.json：存放全局公用的页面属性。
3. app.wxss：存放全局公用的页面样式

封装Http请求方法

接下来就不如正题，封装请求方法了。微信小程序的http请求方法如下

wx.request({
        url: url,
        method:"POST",
        header:{
          'content-type': 'application/x-www-form-urlencoded',//解决请求不到数据
        },
        data:data,
        success:result=>{
          //请求成功后处理数据
        },
        fail:result=>{
          //请求失败后给出提示
        }
})

但是不可能每次请求时，都写一遍这样的请求方法，会有很多冗余代码。
那么封装方法的重要性就体现出来了。

1. 新建一个普通的JS方法

 sendHttp:function(url,data，method){
		
 }

2. 将微信的http请求方法复制进去

 sendHttp:function(url,data，method){
		wx.request({
        url: url,
        method:"POST",
        header:{
          'content-type': 'application/x-www-form-urlencoded',//解决请求不到数据
        },
        data:data,
        success:result=>{
          //请求成功后处理数据
        },
        fail:result=>{
          //请求失败后给出提示
        }
	})
 }

这样一个简单的http请求方法就完成了。

还没完。。。。。。。。。。。

因为请求方法是异步的，所以公用的请求方法无法把接口返回的数据return出去

下面继续补充。。。

解决Http请求方法异步问题

1. 小程序为了解决请求方法异步无法return返回值的问题，于是才有了Promise对象。接下来把上面的方法稍作修改

 sendHttp:function(url,data，method){
		return new Promise((resolve, reject)=>{
      wx.request({
        url: url,
        method:method,
        header:{
          'content-type': 'application/x-www-form-urlencoded',//解决请求不到数据
        },
        data:data,
        success:result=>{
          if(result.data.code!=200){
            wx.showToast({
              title: result.data.msg,
              icon: 'none',
              duration: 2000//持续的时间
            })
          }else{
            resolve(result.data.result);
          }
        },
        fail:result=>{
            wx.showToast({
              title: ＇请求失败，请稍后重试＇,
              icon: 'none',
              duration: 2000//持续的时间
            })
          }
        }
      })
    })
 }

将请求方法使用Promise包起来，使用resolve/reject返回一个Promise对象。
至于resolve/reject的区别嘛

1. resolve：请求成功后处理的对象
2. reject：请求失败后处理的对象

但是又有个新的问题。怎么解析Promise对象呢？

下面继续。。。。。。。

解析 Promise 对象

1. 新建一个公用的JS方法

 getHttpResult:async function(url,data,method){
  return await this.sendHttp(url,data,method);
  },

使用async关键字修饰方法，使方法异步调用请求，再使用await关键字修饰调用的请求方法。然后return出去
2. 接下来就可以再各个需要Http请求的地方调用啦

formSubmit:function(e){
    var promise= app.getHttpResult(url,data);
    promise.then(resp=>{
      if(null!=resp){
      //跳转页面
        wx.redirectTo({
          url:'../mediate/mediate'
        })
      }
    })
   }

解析promise对象需要使用.then方法，然后自定义一个返回值名称，上述代码中的resp参数就是解析出来promise对象结果，也就是接口返回的真实数据啦。

在then方法里面就可以写Http请求之后的数据操作啦，比如页面列表的渲染，表单提交后的页面跳转。

PS：初次学习，不喜勿喷！ 欢迎交流

This is all ！！！