当前位置：首页 > news >正文

微信小程序网络请求封装

news 来源：原创 2025/7/6 6:49:10

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

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

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

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

1.新建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类。并且实例化了一下。

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

1.引用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)



  },

})

以上就是一个简单的封装方法，复制粘贴就能用。

里面有个问题，如何不写入async 和await 会这么么样？

没错，时返回一个promise对象。

2.完善请求-statusCode状态码

其实方法里面还有一些问题，这个问题就是，在小程序中，只要服务端返回了结果，就会进入到小程序的success中，那么当服务器返回的结果是401或者是500等结果，也同样进入到了success中，因此上述中就缺少了相关返回结果的判断，下面代码中我们加入statusCode的判断来完善风封装的请求。

我是直接写在了wx.request里面用 switch case 来判断的，你也可以写在别的地方。例如写在拦截器请求拦截器和响应拦截器中，我是觉得我开始参数合并、修改啥的都写在了方法里面，我就依旧在wx.request里面来写就算了。

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.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJjOFJHelNVQ3RjMGVhWkJxV1VzY3lEb2V4T0dMbXB0ZiIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsImRlcHRJZCI6MTAzLCJkZXB0TmFtZSI6IueglOWPkemDqOmXqCIsImRlcHRDYXRlZ29yeSI6IiJ9.sacBfJ8qPOEICfFTpbxgRaQN2A368rZITV6_jwB4_-Y";

    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)=>{

          switch (res.data.code) {

            case 200:

              return resolve(res.data)

            case 401:

             wx.showModal({

              title: '系统提示',

              content: '登陆过期，请重新登录',

              showCancel:false,

              success (modalres) {

                if (modalres.confirm) {

                  console.log('用户点击确定');

                }

              }

             })

             return Promise.reject(res)

            default:

              wx.showToast({

                title: '系统更新中...',

                duration:3000

              })

              return Promise.reject(res)

        }



        },

        fail:(err)=>{

          reject(err)

        }

      })

    })

  }

}

const instance = new WxRequest();

instance.interceptors.request=(config)=>{

  return config;

}

instance.interceptors.response=(response)=>{

  return response;

}

export default instance;

2.使用的话参照之前1.使用就行了，没啥大变化。

3.封装更加便捷的方法

大家在用的时候，有没有发现，每次请求虽然比之前简单了，但是还是不够简单。下面我们利用request这个定义的方法，在创建几个更快捷的请求方法。

class WxRequest{

  constructor(){

  }

  defaults={

    baseUrl:'http://36.137.4.235:8080',

    header:{

      clientid:"e5cd7e4891bf95d1d19206ce24a7b32e",

      Authorization:"",

    },

    method:"GET",

    data:null

  }

  interceptors={

    request:(config)=>{

      return config;

    },

    response:(response)=>{

      return response;

    }

  }

  request(options){

    let access_token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJjOFJHelNVQ3RjMGVhWkJxV1VzY3lEb2V4T0dMbXB0ZiIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsImRlcHRJZCI6MTAzLCJkZXB0TmFtZSI6IueglOWPkemDqOmXqCIsImRlcHRDYXRlZ29yeSI6IiJ9.sacBfJ8qPOEICfFTpbxgRaQN2A368rZITV6_jwB4_-Y";

    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)=>{

          switch (res.data.code) {

            case 200:

              return resolve(res.data)

            case 401:

             wx.showModal({

              title: '系统提示',

              content: '登陆过期，请重新登录',

              showCancel:false,

              success (modalres) {

                if (modalres.confirm) {

                  console.log('用户点击确定');

                }

              }

             })

             return Promise.reject(res)

            default:

              wx.showToast({

                title: '系统更新中...',

                duration:3000

              })

              return Promise.reject(res)

        }



        },

        fail:(err)=>{

          reject(err)

        }

      })

    })

  }

  get(url,data){

    return this.request({url:url,method:"GET",data:data})

  }

post(url,data){

    return this.request({url:url,method:"POST",data:data})

  }

put(url,data){

    return this.request({url:url,method:"PUT",data:data})

  }

delete(url,data){

    return this.request({url:url,method:"DELETE",data:data})

  }

}

const instance = new WxRequest();

instance.interceptors.request=(config)=>{

  return config;

}

instance.interceptors.response=(response)=>{

  return response;

}

export default instance;

3.引用request.js文件并且使用新的快捷方法

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

Page({

onLoad: function (options) {

    this.getList();

  },

  async getList(){

let data = {

        pageSize:"10",

        pageNum:"1",

        isAsc:"desc"

      }

    let res = await instance.get('/desktop/icon/list',data)

    console.log(res)

  },

})

这样是不是更简单了....哈哈哈哈

相关文章：