微信小程序promise封装wx.request()

一、promise使用及实现、async,await、generator函数的概念

Promise概念：
promise（首字母小写）对象指的是“Promise实例对象”

Promise首字母大写且单数形式，表示“Promise构造函数”

Promises首字母大写且复数形式，用于指代“Promises规范”

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。

Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

 

async,await概念：

async+await是es7提出来的概念，它也是为了解决回调地狱的问题，它只是一种语法糖，从本质上讲，await函数仍然是promise，

值得注意的是，async和await必须要一起使用。

用法：首先在 function 前面加 async 用来说明这个函数是一个异步函数

 

generator函数的概念：
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数一个状态机，封装了多个内部状态。

执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。

 

 

二、微信小程序之使用promise封装wx.request()

1.目录结构

首先在env目录下创建一个index.js文件,里面配置开发环境并将其导出

//配置不同的开发环境
module.exports={
  //开发环境
  Dev:{
    baseUrl:'http://123.207.32.32:8000/api/h8',
  },
  //测试环境
  Test:{
    baseUrl:'http://www.test.com'
  },
  //生产环境
  Prod:{
    baseUrl:'http://www.api.douban.com'
  }
}

进入http目录，在api.js中统一管理所有的url请求地址，方便后期的管理以及维护。

//定义请求路径并导出对象
module.exports={
  "banner":"/home/multidata",  //路径接口
  "list":"/home/list"
}

在demand.js文件中中发出一个request函数，该函数返回值是一个promise对象

//封装wx.request()网络模块

//先定一个函数 这个函数会返回一个promise对象
module.exports=(url,method,data)=>{
  let p=new Promise((resolve,reject)=>{
    wx.request({
      url: url,    //路径
      method:method,  //方式
      data:Object.assign({},data),   //请求的参数
      header:{"Content":"application/text"},  //请求头
        //成功的回调函数
      success(res){   
        resolve(res)
      },
         //失败的回调
      fail(err){    
        reject(err)
      }
    })
  })

  return p;
}

http.js，这个是入口文件，别人看到就知道此文件是干嘛用的

//入口函数，先导入环境变量，路径和方法在此处统一调用
const env=require('../env/index')  //导入的环境变量
const demand=require('./demand')   //封装的请求
const api=require('/api')         //封装的请求接口


//首先确定当前环境
let baseUrl=evn.Dev.baseUrl
//如果接口需要token，那么就获取token
let token=wx.getStorageSync('token') //获取本地存储的token

//请求的函数
//比如轮播图banner请求
function banner(){
  //调用该方法，传递路径(环境前缀+路径),方式,参数 函数结果会返回一个promise对象
  return Request(baseUrl+Url.banner,'get',{})
}
//其它请求 按照上一步写法写

//将封装好的请求发出
module.exports={
  banner,
}

最后一步咯，在全局app.js中导入index，注册到根组件

//app.js

//导入http请求模块
const http=require('./http/index')

//在App方法中挂载一个http方法，挂在上就可以使用
App({
  http,
})

怎么使用

//哪个文件要发送请求，就在头部引入app.js里面app这个全局对象
const app=getApp()
//使用方法简单粗暴,括号内可以传参数
app.http.banner().then(res=>{
	console.log(res)
})