小程序黑马优购学习笔记【1】Promise封装wx.request请求

一、初次封装

// 同时发送异步代码的次数
export const request = (params) => {
  // 定义公共的url
  const baseUrl = "xxx.xxx.xx.xxx";
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      // 成功时
      success: (result) => {
        resolve(result.data.message);
      },
      // 失败时
      fail: (err) => {
        reject(err);
      },
      // 不管成功或失败都会做的操作
       complete: () => {
      }
    });
  })
}

二、考虑token

// 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
  let header = {
    ...params.header
  };
  if (params.url.includes("/my/")) {
    // 拼接header 带上token
    header["Authorization"] = wx.getStorageSync("token");
  }

三、完整代码

// 同时发送异步代码的次数
let ajaxTimes = 0;
export const request = (params) => {
  // 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
  let header = {
    ...params.header
  };
  if (params.url.includes("/my/")) {
    // 拼接header 带上token
    header["Authorization"] = wx.getStorageSync("token");
  }


  ajaxTimes++;
  // 显示加载中 效果
  wx.showLoading({
    title: "加载中",
    mask: true
  });


  // 定义公共的url
  const baseUrl = "https://api.zbztb.cn/api/public/v1";
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      header: header,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result.data.message);
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
        ajaxTimes--;
        if (ajaxTimes === 0) {
          //  关闭正在等待的图标
          wx.hideLoading();
        }
      }
    });
  })
}

四、使用

// 引入
import { request } from "../../request/index.js";

// 获取商品详情数据
async getGoodsDetail(goods_id) {
   const goodsObj = await request({ url: "/goods/detail", data: { goods_id } });
   this.GoodsInfo = goodsObj;
   // 1 获取缓存中的商品收藏的数组
   let collect = wx.getStorageSync("collect") || [];
   // 2 判断当前商品是否被收藏
   let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
   this.setData({
     goodsObj: {
       goods_name: goodsObj.goods_name,
       goods_price: goodsObj.goods_price,
       // iphone部分手机 不识别 webp图片格式 
       // 最好找到后台 让他进行修改 
       // 临时自己改 确保后台存在 1.webp => 1.jpg 
       goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
       pics: goodsObj.pics
     },
     isCollect
   })
 },