微信小程序中的api接口封装

news/2024/7/20 3:56:56 标签: 微信小程序, 小程序

文章目录

  • 一、第一步(在小程序的目录下新建一个 api 的文件夹)
  • 二、封装http.js
  • 三、封装request.js
  • 四、封装index.js
  • 五、在需要调用的页面


一、第一步(在小程序的目录下新建一个 api 的文件夹)

http.js:存放公共服务器地址
index.js:存放api请求地址
request.js:存放封装的api请求

在这里插入图片描述

二、封装http.js

let baseUrl = 'http://127.8.1.1';
export {
  baseUrl
}

三、封装request.js

import { baseUrl } from './http.js'
 
module.exports = {
  request : function(url, methodType, data){
    let fullUrl = `${baseUrl}${url}`
    // let token = wx.getStorageSync('token') ? wx.getStorageSync('token')  : ''
    //(wx.showLoading)显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
    wx.showLoading({ title: "数据请求中"  });
    return new Promise((resolve,reject)=>{
      wx.request({
        url: fullUrl,
        methodType,
        data,
        header: {
          'content-type': 'application/json', // 默认值
          // 'x-api-key': token,
        },
        success(res){
          if (res.data.status == 200) {
            resolve(res.data)
            wx.hideLoading()
          }else{
          //手动关闭loading提示框
            wx.hideLoading()
            wx.showToast({
              title: res.data.msg,
              icon:'none'
            })
            reject(res.data.message)
          }
        },
        fail(){
          wx.showToast({
            title: '接口请求错误',
            icon:'none'
          })
          reject('接口请求错误')
        }
      })
    })
  }
}

四、封装index.js

import { request } from './request'
 
module.exports = {
  // 获取请求接口
  queryAddressList: (data) => request('/company/getlist', 'GET', data),
}

五、在需要调用的页面

// 引入 api 下的 index 文件

//注意引入路径
const api = require('../../api/index')
 
// 在方法中调用
 goRegister(){
 //参数data
    let data = {
      a: this.data.a,
      b: this.data.b,
    }
    api.queryAddressList(data).then((res) => {
      console.log(res,'res');
    })
  },

http://www.niftyadmin.cn/n/203824.html

相关文章

C语言基础概念与特性介绍与示例

C语言的知识结构可以从以下几个方面来划分: 基础数据类型:包括整型、字符型、浮点型等,为C语言程序员必须掌握的基本知识。 运算符和表达式:包括算术运算符、关系运算符、逻辑运算符等,还有条件表达式和位运算等相关内…

ChatGPT4 VS ChatGPT3.5:揭秘人工智能语言模型的技术革新

摘要:本文将详细介绍ChatGPT4与ChatGPT3.5之间的关键技术差异,解析为何ChatGPT4在诸多方面超越了ChatGPT3.5,以及这一领域的未来发展趋势。 一、引言 随着人工智能和自然语言处理技术的不断发展,智能对话机器人成为了越来越多人的…

Android 插桩之美,全面掌握

链接: https://www.yuque.com/docs/share/b49a3274-17d9-4c87-815a-4a13ab72e4e0 1 插桩 插桩是什么?你在开发中有用过插桩的技术吗? 所谓的插桩就是在代码编译期间修改已有的代码或者生成新代码。 插桩具体在编译的哪个流程介入呢&…

Spark运行模式介绍

文章目录1. Local运行模式1.1 基本运行情况介绍1.2 角色划分1.3 Spark 任务提交与解释器对比2. StandAlone运行模式2.1 StandAlone介绍2.2 StandAlone架构2.3 Spark应用架构2.4 StandAlone HA 运行原理3. Spark on YARN3.1 Spark on Yarn 本质3.2 部署模式3.3 两种部署模式运行…

【swagger使用详解】『CSDN精选』java如何集成swagger进行接口测试【博主亲测有效】

【写在前面】对于我前端开发出身的写接口并测试的话,我还是更喜欢用swagger,主要它那种界面用起来比较的舒服,当然很多人还是习惯性的用post进行测试,接下来我就来和大家说说怎么将swagger引入到你的项目中去。及swagger该如何使用。 涉及知识…

NCL数据分析与处理

详情点击链接:NCL数据分析与处理 一,NCL简介及安装 NCL简介;Windows及Linux操作系统下的NCL安装步骤;NCL运行方式二,基本语法 变量;运算符;数组;元数据;数组的截取&…

考研数二第十七讲 反常积分与反常积分之欧拉-泊松(Euler-Poisson)积分

反常积分 反常积分又叫广义积分,是对普通定积分的推广,指含有无穷上限/下限,或者被积函数含有瑕点的积分,前者称为无穷限广义积分,后者称为瑕积分(又称无界函数的反常积分)。 含有无穷上限/下…

企业服务器安全该如何进行之主机加固分析

目前现状 无论是中小企业还是大型企事业单位,均有属于自己的内网或公有云服务器。这些服务器有的是专门的SVN、GIT代码服务器,有的是文档存储服务器,有的是应用服务器。服务器是企业的核心命脉,所有知识产权及多年心血都集中汇总…