微信小程序-封装接口

最新推荐文章于 2025-06-23 17:27:52 发布

阿玺呀

最新推荐文章于 2025-06-23 17:27:52 发布

阅读量706

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序学习

本文链接：https://blog.csdn.net/safastate/article/details/115731480

本文档介绍了如何在小程序中实现接口的封装。首先在根目录创建config.js配置公共接口地址，然后在utils文件夹下新建http.js，封装wx.request。接着在api文件夹下按模块创建接口文件，最后在页面中实例化并调用封装好的接口。通过错误处理和容错机制确保接口调用的稳定性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	1,根目录中新建config.js文件
/*
* 小程序接口封装:
1,创建config.js 
配置公共的请求接口地址以及其他全局参数 

2,在utils目录下新建http.js/ request.js 
封装wx.request配置

3,在根目录下创建api文件夹,根据对应的接口模块创建对应接口文件,在文件内封住对应的接口 

4,在页面内调用封装的接口 
需要进行实例化
*/

const config = {
  //公共的接口地址 
  api_base_url: 'http://weixin.itying.com',
  //接口所需的appKey  类似token 请求接口时需要校验的数据
  // appkey: '-----------------'
}
//ES6MOdule export按需导出  列:export function Fu(){}
//接收时import 需要用结构赋值的方式接收 import {Fu} from ""
export {
  config
}

 2,在utils文件中新建request文件
 
//引入公共的接口地址 
import { config } from "../config"

//声明变量  用于容错处理
const tips = {
  "1": "抱歉出现一个错误",
  "1000": "输入参数错误",
  '1001': "找不到资源",
  '1002': "未知错误"
}

//使用class类配置接口配置,类似于配置axios
class HTTP {
  request({ url, method = "GET", data = {} }) {
    //返回一个Promise对象, 调用时可以使用Promise的方法 .then .catch
    return new Promise((resolve, reject) => {
      this._request(url, method, data, resolve, reject)
    })
  }

  _requ