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

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();
  // })
},

如上，完成接口返回值解析的简化。

1.4 小结

本节主要功能知识点如下：

• 提取接口公共路径
• 使用es7的async和await简化请求
• 简化接口返回值解析