微信小程序封装请求的js

1.配置访问服务器的地址config.js:

const config = {//192.18.1.2:8083 https://www.so.com/
  api_base_url: ‘http://192.168.1.12:8083‘,
  // api_base_url:"https://www.baidu.com",
  img_base_url: ‘‘
}

export { config }

2.封装http请求http.js:

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

const tips = {
  1: ‘抱歉,出现了一个错误‘,
  205: ‘暂无数据!‘,
  300:‘页面重定向,注意信息安全!‘,
  400:‘语法格式有误!,请检查错误输入‘,
  401: ‘登录失败!‘,
  404:‘页面资源错误!‘,
  500:‘服务器错误!‘
}

class HTTP {
  request({ url, data = {}, method = ‘GET‘ }) {
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method)
    })
  }
  _request(url, resolve, reject, data = {}, method = ‘GET‘) {
    wx.request({
      url: config.api_base_url + url,
      method: method,
      data: data,
      header: {
        // ‘content-type‘: ‘application/json‘
        ‘content-type‘: method == ‘GET‘ ? ‘application/json‘ : ‘application/x-www-form-urlencoded‘,
        ‘Accept‘: ‘application/json‘
      },
      success: (res) => {
        // console.log(‘你好请求成功‘, res.statusCode, code.startsWith(‘2‘))
        const code = res.statusCode.toString()
        // console.log(‘http你好请求成功‘, res,res.statusCode, code.startsWith(‘2‘))
        if (code.startsWith(‘2‘)) { // 一般情况下正确的请求结果是以2开头的(200)
          // console.log("code.startsWith(‘2‘)", code)
          resolve(res.data)
        }
        else {
          reject(res)
          const error_code = res.data.code
          this._show_error(error_code, res.data)
        }
      },
      fail: (err) => {
        reject(err)
        this._show_error(1)
      }
    })
  }

  _show_error(error_code,data) {
    // console.log("tips[error_code]", error_code)
    if (!error_code) {
      error_code = 1
    }
    const tip = tips[error_code] //= data.data
    wx.showToast({
      title: tip ? tip : tips[1],  // tips内没找到对应的错误代码时,使用1代替
      icon: ‘none‘,
      duration: 2000
    })
  }

}

export { HTTP }

3.分装每一个或者通用的请求itemapi.js:

import { HTTP } from ‘./http.js‘

class DemoModel extends HTTP {
  // 1、学生端
  // 验证微信号是否注册
  verificationWecat(data) {
    return this.request({ url: ‘/Wec/verificationWecat‘, data: data, method: ‘POST‘ })
  }
  // 修改用户信息
  updateUserInfo(data) {
    return this.request({ url: ‘/Wec/updateUser‘, data: data, method: ‘POST‘ })
  }
  // 添加用户
  addUser(data) {
    return this.request({ url: ‘/Wec/addUser‘, data: data, method: ‘POST‘ })
  }

  // 小程序获取学校内店铺信息
  getStoreList(data) {
    return this.request({url: ‘/Wec/queryDepStoreBySchId‘,data: data,method: ‘GET‘})
  };
  // 获取店铺下的所有产品,并按照分类进行查询
  getStoreProduct(data) {
    return this.request({ url: ‘/Wec/queryProductByDsId‘, data: data, method: ‘GET‘ })
  };
  // 根据用户id查询用户地址列表
  userCheckAdress(data) {
    return this.request({ url: ‘/Wec/queryUserAddressByUsrId‘, data: data, method: ‘GET‘ })
  };
  // 根据地址id查询用户地址
  adressCheckUser(data) {
    return this.request({ url: ‘/Wec/queryUserAddressById‘, data: data, method: ‘GET‘ })
  };

// 修改用户地址
  adressCheckUser(data) {
    return this.request({ url: ‘/Wec/updateUserAddress‘, data: data, method: ‘POST‘ })
  };
// 添加用户地址
  addAdress(data){
    return this.request({ url: ‘/Wec/addUserAddress‘, data: data, method: ‘POST‘ })
  }
// 根据用户id查询用户地址列表
  checkAdress(data) {
    return this.request({ url: ‘/Wec/queryUserAddressByUsrId‘, data: data, method: ‘GET‘ })
  }

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

// 2、管理端
}

export {
  DemoModel
}

4.使用方法:

import { DemoModel } from ‘../../../wxapi/itemapi.js‘
const apiModel = new DemoModel()
lifetimes: {
    attached: function () {
      var that =this
      // 在组件实例进入页面节点树时执行
      apiModel.getStoreList({ schId: 1,}).then(res => {
        if (res.code ==‘200‘){
          this.setData({ list: res.data });

        }else{
          wx.showToast({
            title: res.data,
            icon:‘none‘
          })
        }
      }).catch(err => {
        console.log(‘请求失败err‘,err)
      });
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行

    },

原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/11982083.html

时间: 2024-10-07 06:09:36

微信小程序封装请求的js的相关文章

微信小程序封装请求接口

var rootDocment = 'https://123.com';//你的域名 function postData(url, data, cb) { wx.request({ url: rootDocment + url, data: data, method: 'post', success: function (res) { return typeof cb == "function" && cb(res) }, fail: function () { ret

微信小程序 网络请求之re.request 和那些坑

微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 首先,先确认是否设置了合法域名,或者在开发环境下不校验合法域名.关于设置合法域名请看→微信小程序 网络请求之设置合法域名   以下是wx.request的详细说明,截图于微信小程序开发文档 在微信index.js 发起一个普

微信小程序数据请求方法wx.request小测试

微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </view> <button bindtap="RequestData" value="Button">Button</button> 主要是一个按钮,点击后将请求的数据写入到textarea中 js文件: Page({ data:{ textd

微信小程序-06-详解介绍.js 逻辑层文件-注册页面

上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,虽然大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里的内容,熟悉一下操作 页面 Page Page(Object) Page(

微信小程序学习Course 4-2 JS数组对象学习

微信小程序学习Course 3-2 JS数组对象学习 本节主要介绍JS中的数组. 3-2.1 数组的声明 数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = [];//创建一个空数组 var names = ["sadad","asdsad"];//创建一个包含两个字符串的数组 var names = new Array(3);//创建一个包含三个元素的数组 3-2.2 数组的增添 数组有多种增添方式,一种是栈方式,另一种

第三篇、微信小程序-网络请求API

wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{}, }, onLoad:function(options){ this.getDate('http://baobab.wandoujia.com/api/v2/feed?num=2'); }, /** * 网络请求的函数:接收一个URL参数 */ getDate:function(URL){ var

微信小程序 POST请求

微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求,POST请求的时候有好几个坑.我已经为大家填好了. <img src="http://img.blog.csdn.net/20161017170933243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" align

微信小程序request请求实例,网络请求。

最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参数说明如下 OBJECT参数说明: 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的 header , header 中不能设置 Referer method String 否

【微信小程序】引入外部js 方法

微信小程序引入外部js 方法 步骤: 1.首先将外部js放在你指定的文件夹里  如:utils/fecth.js 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js ,并使用暴露出来的方法 步骤1:使用utils文件夹下的 fetch.js 方法 步骤2:将我要使用的方法用 module.exports 给暴露出来 下面是一个网络请求的js方法: module.exports = (url, data) => { return new Promise((reso