封装小程序request请求[接口函数]

封装小程序 request 请求

在 /utils 目录下创建 request.js 文件进行小程序request请求的封装：

// 封装数据请求request
const BASE_URL = ;  // 基础地址

export default function request(url,params={}){
  return new Promise((resolve,reject)=>{
  wx.showLoading({  // 请求提示
    title: 正在加载中...,
  })
  wx.request({
    url: BASE_URL + url,  // 请求url地址
    data: params.data || {},  // 请求参数
    header: params.header || {},  // 请求头
    method: params.method || GET, // 请求方式
    dataType: json, // 返回数据类型
    success: (res)=> { // 成功调用
      wx.hideLoading(); // 关闭请求提示
      resolve(res.data) // 成功处理res.data中的数据
    },
    fail: (err)=> { // 失败调用
      wx.hideLoading(); // 关闭请求提示
      wx.showToast({  // 提示错误信息
        title: err || 请求错误！,
      })
      reject(err) // 失败处理err
    }
  })    
})
}

对于request的网络数据请求的封装并没有那么的复杂，加上一些注释小白应该可以更容易理解，在未 return new Promise(..) 之前返回的是一个Promise对象，这时可以再 new 一个Promise拿到数据，它有两个参数，两个参数分别又是函数，即高阶函数；请求之前使用wx.showLoading提示请求在加载中，通过wx.request发起数据请求，与基础地址BASE_URL拼接，通过data接收传入参数，header、method同理，success成功调用关闭掉请求提示交给resolve处理成功结果，fail失败调用关闭掉请求提示，同时需要提示用户请求错误的信息后交给reject处理失败结果；

如何来调用封装的request请求呢？

首先先来准备一下数据请求的测试接口，这里通过本地Node.js搭载的服务器提供的API接口进行测试：

测试接口已经准备完成，设置一下 BASE_URL 基础地址为 http://127.0.0.1:3000；

const BASE_URL = http://127.0.0.1:3000

在 index.wxml 中设置一个按钮：

<button bindtap="handleClick">request请求</button>

在 index.js 中引入封装request数据请求文件，并编写按钮的触发事件 handleClcik：

// index.js
const app = getApp()
import request from ../../utils/request
Page({
    handleClick(){
        request(/api/navList).then(res=>{
            console.log(res);
        })
    }
})

封装各数据接口请求函数

项目中用着许许多多的接口数据请求，此时对于这些接口函数进行封装处理，使用的时候可以直接来导入使用；

创建 /util/api.js 文件封装各接口请求函数的文件：

// 引入封装request请求函数
import request from ./request
// 获取swiperList数据
export const reqSwiperList = () => request(/api/swiperList)
// 获取navList数据
export const reqNavList = () => request(/api/navList)
// 获取category数据
export const reqCategory = () => request(/api/category)

下面在 index.js 中的onLoad中来调用使用：

...
 onLoad:function(){
    reqSwiperList().then(res=>{console.log(reqSwiperList,res)});
    reqNavList().then(res=>{console.log(reqNavList,res)});
    reqCategory().then(res=>{console.log(reqCategory,res)});
 }
...

async 和 await

通过 async 和 await 的写法会比使用 .then(res=>{}) 的这种方式更加简练一些；下面来将 handleClick 中的请求函数做一个变更：

handleClick(){
    reqSwiperList().then(res=>{
        console.log(res);
    })
}

使用 async 和 await 写法：

async handleClick(){
    const res = await reqSwiperList()
    console.log(res)
}

以上就是封装小程序request数据请求和封装各接口数据请求函数的内容；可以在你的小程序项目当中去使用，封装小程序的request请求和封装各接口请求，可以让你在小程序项目中更上一层！感谢大家的支持！！！