优化接口-简化返回值和使用es7的async

⼩程序中⽀持es7的async语法

es7的 async 号称是解决回调的最终⽅案

1. 在⼩程序的开发⼯具中，勾选 es6转es5语法
2. 下载 facebook的regenerator库中的 https://github.com/facebook/regenerator/blob/5703a79746fffc152600fdcef46ba9230671025a/packages/regenerator-runtime/runtime.js
3. 在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去
   import regeneratorRuntime from “…/…/lib/runtime/runtime.js”;
4. 在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊
5. async的核心就是 promise，只是用起来简单点。

原先的index.js

// pages/category/index.js
/**web中的本地存储与小程序中的本地存储区别
 * 1 写代码的方式：
 * web localStorage.setItem("key","value") localStorage.getItem("key")
 * min wx.setStorageSync("key","value") wx.getStorageSync("key")
 * 2 存的时候有无类型转换
 * web 不管存入的是什么类型的数据，最终都会先调用 toString() 把数据变成字符串
 * min 不存在类型转换这个操作 存什么类型就获取到什么类型
 */

import {request} from "../../request/index.js";
import regeneratorRuntime from "../../lib/runtime/runtime.js";
Page({
  data: {
    leftMenuList:[],    //左侧菜单数据
    rightContent:[],    //右侧商品数据
    currentIndex:0,     //被点击的左侧菜单
    scrollTop:0         //右侧内容的滚动条距离顶部的距离
  },
  //接口数据的返回值
  Cates:[],
  //获取分类数据
  getCates(){
    request({url:"/categories"})
    .then(res=>{
      this.Cates=res.data.message;
      wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
      
      let leftMenuList=this.Cates.map(v=>v.cat_name);
      let rightContent=this.Cates[0].children;
      this.setData({
        leftMenuList,
        rightContent
      })
    })
  }
})

修改后的index.js

//获取分类数据
  async getCates(){
    //使用es7的async发送异步请求
    const res=await request({url:"/categories"});
    this.Cates=res.data.message;
    wx.getStorageSync("cates",{time:Date.now(), data:this.Cates});
    let leftMenuList=this.Cates.map(v=>v.cat_name);
    let rightContent=this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightContent
    })
  },

主要是语法修改后，代码看起来简洁很多。

进一步完善

“…/…/request/index.js” 文件代码

export const request=(params)=>{
  // 定义公共的url
  const comUrl="https://api-hmugo-web.itheima.net/api/public/v1"
  return new Promise((resolve,reject)=>{
    wx.request({
      ...params,
      url:comUrl+params.url,
      success: (result) => {
        resolve(result.data.message);//这一步省去了引用这个接口的页面的 res.data.message
      },
      fail:(err)=>{
        reject(err);
      }
    });
  })
}

除了提取出URL中的公共部分之外，还让获取返回数据的时候少了 .data.message 的过程。直接可以

const res=await request({url:"/categories"});
this.Cates=res;

让获取跟简单了。而且接口返回数据大体都是这个结构，这样简化之后确实有它的优势。但是这得有一个很规范化的后端，后端写的时候，也要有这么嵌套的数据。但是接口弄得太过细化后，用console.log(res) 语句查看返回的数据时，不方便查看全局结构，只能看到一个局部数据。对应到上面的代码也就是只能看到 message里的数据。