微信小程序request请求封装（async...await...使用）

朱大壮

小程序使用async…await…的前提

小程序内置支持ES6，
详情==>本地设置里勾选“增强编译”，就可以支持async…await…
在这里插入图片描述
点击这里直达官网的增强编译介绍，懒得去官网的同鞋可以看下图：

勾选以后，就可以就行请求封装了。开始步入正题==========》

封装：request请求

const baseUrl = 'https://xxxxxxx.com';//定义服务器地址公共部分

/**
 * 参数说明
   parmas:{},是一个对象
 */
let countClient = 0;//计数器，多次调用接口，同时关闭loading提示框
export const client = (parmas) => {
//加个loading，友好一点
  countClient++;
  wx.showLoading({
    title: '加载中',
    mask: true
  });

  const token = wx.getStorageSync('token');
  if(parmas.method === undefined) {//若是没有传请求方式，默认get
    parmas.method = 'get';//设置默认值
    parmas.header = {'content-type': 'application/json'};//设置默认值
  }
  if(token){//这里的token验证如果不需要，可以删除掉
    if(parmas.method.toLowerCase() === 'post') {
    //若是删除了token验证，只保留这个if语句就可以，这里判断post，设置请求头
      parmas.header={
        "content-type":"application/x-www-form-urlencoded",
        'Authorization': 'Bearer ' + token
      }
    } else {
    	parmas.header={
	      'content-type': 'application/json',
	      'Authorization': 'Bearer ' + token,
	    }
    }
  }

  return new Promise((resolve,reject) => {
    wx.request({
      ...parmas,
      url: baseUrl+parmas.url,
      success:res => {
        resolve(res)
      },
      fail:err => {
        reject(err)
      },
      complete:()=> {
      //无论成功失败，均关闭loading
        countClient--;
        if(countClient === 0) {
          wx.hideLoading()
        }
      }
    });
  })
};

调用：request请求

1.首先引入封装请求的js文件，login下文有介绍，微信登录使用，不需要的可以不引入。

import {client,wlogin} from "../../tools/router.js"

2.调用方式，传入对象的参数，可以去小程序官网查找官方接口支持的任意参数，点击直达wx.request

//get请求，不传参的话，非常简洁
const mapData = await client({
  url:'/xxx/xxxxxxx',//这里放入路径就行，服务器地址公共部分已拼接
})

//post请求传参
const mapData = await client({
  url:'/xxx/xxxxxxx',//这里放入路径就行，服务器地址公共部分已拼接
  data:{code:"这里是code"},
  method:'post'
})

//若是为了兼容性，可以使用promise的调用方式
client({
  url:'/xxx/xxxxxxx',//这里放入路径就行，服务器地址公共部分已拼接
}).then(res=> {
	//这里是业务处理逻辑
	console.log("成功返回的数据",res)
}).catch(err=>{
    console.log("错误的原因",err)
})

3.这样就解决了异步问题，由上到下依次执行。

在这捎带一个微信登陆封装：

看这里就很清楚，最简单的封装方式。

export const wlogin = ()=> {
  return new Promise((resolve,reject)=> {
    wx.login({
      success: (res) => {
        resolve(res)
      },
      fail:(error)=> {
        reject(error)
      }
    })
  })
}

微信登录调用方式：

//这样直接获取返回的code
const {code} = await wlogin()
console.log("这是登录返回的code",code)

这里再附赠一个循环遍历函数取值（同步）

解决需求：要一次性取上千条数据，但是只能返回100条，并且不可以异步的时候，使用async…await…同步获取。

  async fn() {
      let count = 100;
      for(let u=0; u<50; u++) {
        let result= await client({
          url:'/xxxx/xxxxxxxxx',
          data:{
           take:100,
           skip:count
         }
       })
       console.log(result);
       count += 100;
      }
  },

本网站的服务器由提供