黑马优购小程序之接口优化

本文主要是介绍黑马优购小程序之接口优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- - 1.1 提取接口公共路径
  - 1.2 使用es7的async
  - - 1.2.1 开启增强编译
    - 1.2.2 修改代码
  - 1.3 简化返回值
  - 1.4 小结

1.1 提取接口公共路径

在前面的开发中，网络请求中，url是这么写的：

url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"

如果每个接口都这样的话，就有些繁琐了。在项目中，url公共路径可以提取出来，各业务接口只写配置各自的路径就好了。

修改request/index.js文件，在其中定义baseUrl，并拼接新的请求url，代码如下：

export const request = (params) => {return new Promise((resolve, reject) => {const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";wx.request({...params,url: baseUrl + params.url,success: (result) => {resolve(result);},fail: (error) => {reject(error);}});})
}

将业务请求url修改，以category为例：

/* 加载分类数据*/
getCates() {request({url: "/categories"}).then(result => {this.Cates = result.data.message;// 本地存储数据wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });this.updateUI();})
},

这样就完成了接口公共路径的抽取优化。

1.2 使用es7的async

接下来使用async和await简化请求代码。

1.2.1 开启增强编译

在这里插入图片描述

1.2.2 修改代码

此处以category/index接口为例，代码修改为：

/* 
加载分类数据
*/
async getCates() {const res = await request({ url: "/categories" });this.Cates = res.data.message;// 本地存储数据wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });this.updateUI();
}

是不是清爽很多~

1.3 简化返回值

每个接口都需要this.Cates = res.data.message做解析，这里做下简化操作，将message直接传入各接口调用处。

修改request/index.js，在success中将message返回，代码如下：

export const request = (params) => {return new Promise((resolve, reject) => {const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";wx.request({...params,url: baseUrl + params.url,success: (result) => {resolve(result.data.message);},fail: (error) => {reject(error);}});})
}

修改各接口解析方式，此处以category/index.js为例：

/* 加载分类数据
*/
async getCates() {const res = await request({ url: "/categories" });this.Cates = res;// 本地存储数据wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });this.updateUI();// request({//   url: "/categories"// }).then(result => {//   this.Cates = result.data.message;//   // 本地存储数据//   wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });//   this.updateUI();// })
},