一、在类中定义实例属性,用来设置默认请求参数
defaults={baseURL:'',//请求基准地址url:'',//接口的请求路径data:null,//请求参数method:'GET',//默认的请求方法//请求头header:{'Content-type':'application/json'//设置数据的交互格式},timeout:60000//默认的超时时长,小程序默认的超时时长是1分钟}
二、 在实例化时传入的参数,会被constructor形参进行接收
constructor(params={}){// 通过Object.assign方法合并请求参数// 注意:需要传入的参数,覆盖默认的参数,因此传入的参数需要放到最后this.defaults = Object.assign({},this.defaults,params)}
三、在 request实例方法中合并参数
// 需要先合并完整的请求地址(baseURL+url)options.url = this.defaults.baseURL + options.url// 合并请求参数options={...this.defaults,...options}
四、在实例化时传递参数
const instance = new WxResquest({baseURL:'https://blog.csdn.net',timeout:15000
})
五、完整代码
1、封装代码
// 创建WxResquest类
// 通过类的方式来进行封装,会让代码更具有复用性,也可以方便添加新的属性和方法
class WxResquest{// 定义实例属性,用来设置默认请求参数defaults={baseURL:'',//请求基准地址url:'',//接口的请求路径data:null,//请求参数method:'GET',//默认的请求方法//请求头header:{'Content-type':'application/json'//设置数据的交互格式},timeout:60000//默认的超时时长,小程序默认的超时时长是1分钟}// 用于创建和初始化类的属性以及方法// 在实例化时传入的参数,会被constructor形参进行接收constructor(params={}){// 通过Object.assign方法合并请求参数// 注意:需要传入的参数,覆盖默认的参数,因此传入的参数需要放到最后this.defaults = Object.assign({},this.defaults,params)}// request实例方法接收一个对象类型的参数,属性值和wx.request方法调用时传递的参数保持一致request(options){// 需要先合并完整的请求地址(baseURL+url)options.url = this.defaults.baseURL + options.url// 合并请求参数options={...this.defaults,...options}// 需要使用Promise封装wx.request,处理异步请求return new Promise((resolve,reject)=>{wx.request({...options,// 当接口调用成功时会触发success回调函数success:(res)=>{resolve(res)},// 当接口调用失败时会触发fail回调函数fail:(err)=>{reject(err)}})})}
}// 以下是实例化代码
// 目前写到一个文件中,是为了方便进行测试,以后会提取成多个文件// 对WxResquest进行实例化
const instance = new WxResquest({baseURL:'https://blog.csdn.net',timeout:15000
})// 将WxResquest实例进行暴露出去,方便再其他文件中进行使用
export default instance
2、调用代码
// pages/test/test.js
import instance from '../../utils/request'
Page({async handler(){const res = await instance.request({url:"/Hang_Q?spm=1000.2115.3001.5343",method:'GET'})console.log(res)}
})