promise封装微信小程序的request

为什么要封装wx.requesrt

因为我们平常项目中基本每页都需要请求数据，而如果我们每次请求输入据都用小程序本身的request就会造成代码量过多，很难找到相应的方法。所以要封装一下，从而减少代码量，这个可以做到请求的接口和页面分离，方便维护和阅读。

在我们项目的根目录下新建一个http文件,然后里面新建1个js文件,文件名叫http.js把，然后我们这个http.js主要使用promise封装我们的wx.request();

let baseUrl = “https://xxx”; // 这个变量存放我们接口统一的域名

export default (url,data,method) => {   			
 //接收3个参数 url 请求地址  data  请求参数		method  请求方式
   wx.showLoading({
     title: '加载中',
   })

  return new Promise((resolve, rejects) => {  // 我们封装的 request
    wx.request({
      url:baseUrl+url,  			// 我们使用域名+我们要请求的接口  = 我们要完整请求的接口
      data:data,					// 向接口传入的参数
      method:method,				// 请求方式  get  post
      success(res) {   				// 我们请求成功的回调
        resolve(res)				// 执行我们then 方法
        // wx.hideLoading();  隐藏我们的loading
      },
      fail(err) {					// 我们请求失败的回调
        rejects(err);				// 执行我们的 catch() 方法
      }
    })
  })
}

封装好这个呢，再这个文件夹中新建一个api.js文件。这个文件专门用来请求我们的接口。

import http from './http';  // 先引入我们封装好的 wx.request

async function getIndexSwiper() {  创建一个async异步函数
  let res = await http('/home/swiperdata', {}, 'get'); 
  // 调用http函数    第一个参数 传入我们的请求接口  
  // 第二个参数 是我们请求时携带的参数
  // 第三个参数是 请求防暑
 // 使用我们的 await 拦截代码往下执行，直到我们的请求返回数据
  return res;  然后返回 请求回来的数据
};

export { getIndexSwiper}  // 导出一个对象，引入的时候要使用解构赋值的方式

然后在项目中的全局app.js文件中引入;

import { getIndexSwiper } from './request/api';  // 先引入我们封装好的js; 使用解构赋值的方式
App({
	http:getIndexSwiper ,     // 我们直接在App中新建一个对象即可,
)}

如果要在页面中使用这个接口，就在当前页面调用相应的接口即可

const app = getApp();  // 引入我们的全局 app
Page({
onLoad() {  // 在进入页面时就加载数据
    app.http.getIndexSwiper().then(res => {
     	 console.log(res);   // 这是我们请求过来的数据
      })
    };
  })