微信小程序封装API网络请求,并使用async和await

首先新建一个js文件 写公共的url

export const request = (params) =>{
  // 定义公共的url
  const baseUrl = 'http:api.zbztb.cn/api/public/v1'
  return new Promise((resolve,reject) =>{
    wx.request({
      ...params,
      url:baseUrl + params.url,
      success:(result)=>{
        resolve(result)
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

发起请求的两种方式

1. 这是正常的写法

// 获取分类导航数据
getCateList(){
  request((url:"/home/catitems"))
  .then(result =>{
    this.setData({
      catesList: result.data.message
    })
  })
}

2. 也可以使用es7语法 通过async await来发送请求(需要在开发者工具里勾选ES6转ES5)

小程序目录下新建文件夹 lib/runtime/runtime.js, 将以下代码拷贝进去
点击跳转到代码片段直接复制
在每一个需要使用async语法的页面js文件中 , 都引入以下这行代码, 引入之后不用做任何操作(注: 无法全局引入)

import regeneratorRuntime form '../../lib/runtime/runtime.js'

引入之后就可以直接写async了

async 方法名(){
  const res = await request({url:'/categories'});
  this.Cates = res.data.message;
  // 把接口的数据存入本地储存中
  wx.setStorageSycn('cates,{time:Date.now(),data:this.Cates});

  //左侧菜单数据
  let leftList= this.Cates.map(v => v.cat_name);

  // 右侧内容数据
  let rightContent = this.Cates[0].children;

  this.serData({
    leftMenuList,
    rightContent
  })
}

就是这么简单, 封装后不仅代码简洁了, 而且更利于日后的维护