小程序配置请求器

原生的小程序有自己的自带的一个请求库 wx.request，这就带大家使用加Promise加 wx.request进行我们小程序的一个封装数据请求

1、在根目录下创建一个request文件夹，内部在创建 request.js 和 api.js 两个文件夹

2、在  request.js 文件夹写入

// 表示基础地址
const baseUrl = "http://localhost:8001";

export default function request(url, params = {}) {
  // 封装网络请求的代码
  // 这里返回一个Promise对象,成功与失败的回调--再用点then .catch 去接收它们的状态
  return new Promise(function (resolve, reject) {
    wx.showLoading({
      title: '加载中...',
    })

//设置请求头
 let token = wx.getStorageSync('token');
    var defaultHeader = {}
    if(token){
      if(params.header){
        // params有可能是一个{}, 则params.header就是undefined，params.header["X-Nideshop-Token"]报错
        params.header["xxx"] = token
      }else{
          // 已经登录，但是没有传params
          defaultHeader = {
            "xxx":token
          }
      }
    }

 // 发起请求
    wx.request({
      url: baseUrl + url,
      data: params.data || {},
      header: params.header || {},
      method: params.method || 'GET',
      dataType: 'json',
      success: function (res) {
        wx.hideLoading();
        if (res.data.errno == 0) {
          resolve(res.data)
        }else{
          wx.showToast({
            title: res.data.errmsg,
            icon:"error",
            duration:2000
          })
        }

      },
      fail: function (err) {
        wx.hideLoading();
        wx.showToast({
          title: err || '请求错误！',
        })
        reject(err)
      }
    })
  })
}

利用Promise对象来进行回调，设置默认情况下为GET请求

3、在 api.js 文件夹

import request from "./request"
// 没有携带请求参数的
export const xxx = () => request("xxx")

//携带有请求参数的
export const xxxx = params => request("xxx", params)

4、在页面中使用

import {xxx} from "../../request/api"

// 这边利用 async 和 await 来进行回调

// 带请求参数的 POST请求
 async login(){  // 发送请求
      let res = await xxx({
        method:"POST",// 在request.js文件夹中我们设置了默认请求为GET请求, 要是POST请求这里需要定义，如果是GET请求这段可以不用写
        data:{
          id:xxx
        }
      });
      
      console.log(res )
    },


// 不带请求参数的 POST请求
 async login(){ // 发送请求
      let res = await xxx({
        method:"POST",// 在request.js文件夹中我们设置了默认请求为GET请求, 要是POST请求这里需要定义，如果是GET请求这段可以不用写
      });
      
      console.log(res )
    },




// 带请求参数的  GET 请求
 async login(){  // 发送请求

      let res = await LoginByWebApi({
        data:{
          id:xxx,
        }
      });
      console.log(res )
    },

//在request.js文件夹中设置了默认请求就为GET请求，所以直接用就好了

// 不带请求参数的  GET 请求
 async login(){  // 发送请求

      let res = await LoginByWebApi;
      
      console.log(res )
    },

这边在请求的时候本人建议使用 async 和 await，如果不喜欢 async 和 await 使用 .then 也是一样的，看你自己