微信小程序网络请求封装网站首页 学无止境

微信小程序网络请求封装

JiaLin_Denny 2026-04-01 00:01:04

简介微信小程序网络请求封装

微信小程序的网络请求为什么要封装？封装使用有什么好处？

封装的目的是为了偷懒，试想一下每次都要wx.request，巴拉巴拉传一堆参数，是不是很麻烦，有些公共的参数例如header，baseUrl是不是可以封装起少些一些代码。

同时也是为了避免回调地狱，例如一个请求要依赖于上一个请求的回调结果，那么我们就需要嵌套。这样一层一层的嵌套不利于代码维护。

综上就写个封装吧（我的就是简单封装了下，没有参照大神们的复杂封装，我就是为了单纯请求时候想少些几个参数）....

新建request.js文件

class WxRequest{
constructor(){

}
defaults={
baseUrl:'http://36.137.4.235:8080',
header:{
clientid:"e5cd7e4891bf95d1d19206ce24a7b32e",
Authorization:"",
}
}
interceptors={
request:(config)=>{
return config;
},
response:(response)=>{
return response;
}
}
request(options){
let access_token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJtWFFhSEhZa01DQ3NuYkNpZmozWjNLN3dOaFZVRDdEMCIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsImRlcHRJZCI6MTAzLCJkZXB0TmFtZSI6IueglOWPkemDqOmXqCIsImRlcHRDYXRlZ29yeSI6IiJ9.qfyBJcuu5mEdxKzT3vkvPXxZOgbiHMvmvhEi2IiNpFE";
this.defaults.header.Authorization="Bearer " + access_token
options.url=this.defaults.baseUrl + options.url;
options={...this.defaults,...options}
return new Promise((resolve,reject)=>{
wx.request({
...options,
success:(res)=>{
resolve(res)
},
fail:(err)=>{
reject(err)
}
})
})
}
}

const instance = new WxRequest();
instance.interceptors.request=(config)=>{
return config;
}
instance.interceptors.response=(response)=>{
return response;
}
export default instance;

上面我们就创建好了一个request.js文件，并且里面创建了一个Wx.Request类。并且实例化了一下。

下面我们看一下如何调用这个我们创建的实例化对象

引用request.js文件

import instance from "../../utils/request"

Page({

onLoad: function (options) {

    this.getList();

  },

  async getList(){

    let res = await instance.request({

      url:'/desktop/icon/list',

      method:"GET",

      data:{

        pageSize:"10",

        pageNum:"1",

        isAsc:"desc"

      }

    })

    console.log(res)



  },

})