微信小程序封装一个通用发送请求的ES6类对象

首先我们在项目根目录下建立config.js
config.js参考代码

const config = {
    api_base_url:'http地址',//接口前拼接的域地址
}
export {config}

利用export导出config
之后我们在项目根节点建立文件夹util 在util下建立http.js
在http.js中导入config.js中的config
需要注意的是 用ES6导入的文件是不能用绝对路径的

import {config} from "../config.js"

之后我们在http.js中封装一个发请求的类

class HTTP{
    request(params){
        return new Promise((resolve,reject) =>{
            wx.request({
                url: config.api_base_url+params.url,
                method:params.method,
                data:params.data,
                header: {
                    "content-type":"applion/json",
                    "appkey": 用户的  AppKey身份验证信息 建议放在缓存里
                },
                success:(res)=>{
                    let Code = res.statusCode.toString()
                    if(Code.startsWith("2")){
                        resolve(res.data);
                    }else{
                        wx.showToast({
                            title:"服务器错误请稍后重试",
                            icon:"none",
                            duration:2000
                        })
                        reject(res);
                    }
                },
                fail:(err)=>{
                    wx.showToast({
                        title:"发送请求失败",
                        icon:"none",
                        duration:2000
                    })
                    reject(err);
                }
            })
        })
    }
}

export default HTTP

然后 我们在根目录下创建一个 api 文件夹 然后 创建一个bookApi.js
例如 我们要定义一个getAll 请求方法
先引入刚才的http 然后 new创建实例对象
然后在方法中调用request发送请求 记得这个data?data:{}不能漏 因为 可能用户不传参数

import HTTP from "../utils/http"

let http = new HTTP();

export const getAll = (data)=> {
    return http.request({
        url:'请求地址',
        method:'get',
        data: data?data:{}
    })
}

然后 我们就可以在组件中调用了

import {getAll} from "../../api/bookApi";
Page({
  data: {
    
  },
  onLoad() {
    this.getUserProfile();
  },
  getUserProfile() {
    getAll().then(res=>{
      console.log(res.data);
    }).catch(err => {
      console.error("请求失败",err);
    });
  }
})

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值