微信小程序 js/TS 二次封装wx.request请求

291 阅读1分钟

JS

一、在utils文件夹创建http.js文件进行二次封装

image.png

二、封装


//配置基准地址
const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1/"
//对 wx.request 进行二次封装
//为了防止出现回调地狱以及方便请求所以进行二次封装
const request = function (params) {
  return new Promise((resolve, reject) => {
    //开启loading动画
    wx.showLoading({
      title: '加载中',
    })
    return wx.request({
      ...params,
      url: baseUrl + params.url,
      //超时时间
      timeout: 5000,
      //数据响应成功的回调
      success: (res) => {
        console.log(res, 'res');
        if (res.statusCode == 200) {
          // 通过resolve将响应成功的数据返回
          if (res.data.meta.status == 200) {
            resolve(res.data)
          } else {
            //未成功提示
            wx.showToast({
              title: res.data.meta.msg,
              icon: "error"
            })
          }
        } else {
          wx.showToast({
            title: '网络请求超时!',
            icon: "error"
          })
        }
        //关闭loading动画
        wx.hideLoading()

      },
      //数据响应失败的回调
      fail: (err) => {
        // 通过reject将响应成功的数据返回
        console.log('失败了');
        reject(err)
      }
    })
  })
}
//导出
export default request

三、在utils文件中创建api.js文件进行请求

image.png

四、请求


// 属性	     类型     默认值	    必填	      说明	
// url	     string		  是	开发者服务器接口地址	
// method    string	GET	  否	HTTP 请求方法
// data	string/object/ArrayBuffer 否	请求的参数	


import request from "./http"

export function cateList() {
  return request({
    url: "goods/search"
  })
}

五、使用响应的数据

image.png

TS

image.png