小程序如何封装request请求

小程序封装request请求(Promise)

在项目的开发中有三个环境

开发环境 ,测试环境 ,生产环境

访问正式库接口数据时,例如:商品接口会是https://api/xxx/xxx
访问测试库库接口数据时,例如:商品接口会是http://10.1.8.236:8080/api/xxx/xxx
当环境不同时,直接修改域名即可。这是为什么要封装请求。

提示:以下是本篇文章正文内容,下面案例可供参考

一、封装

在app.js中写好后端公共部分的url地址

在这里插入图片描述

App({
	globalData: {
   		 host: "http://10.1.8.242:8080/crmInterface/",//公共域名部分方便后续的封装
 	 }
}

在目录untils目录下新建文件夹request.js并将代码拷贝

const app = getApp()

const request = (url, options) => {
   return new Promise((resolve, reject) => {
      wx.request({
         url: `${app.globalData.host}${url}`,
         method: options.method,
         dataType: 'json',
         data: options.data,
         header: {
            'content-type': 'application/json',
            "Authorization": wx.getStorageSync('token') ? wx.getStorageSync('token') : ''
         },
         //   header: options.header,
         success(request) {
            if (request.data.code === 200) {
               resolve(request.data)
            } else {
               resolve(request.data)
            }
         },
         fail(error) {
            reject(error.data)
         }
      })
   })
}

const get = (url, options = {}) => {
   return request(url, {
      method: 'GET',
      data: options
   })
}

const post = (url, options) => {
   return request(url, {
      method: 'POST',
      data: options
   })
}

const put = (url, options) => {
   return request(url, {
      method: 'PUT',
      data: options
   })
}

// 不能声明DELETE(关键字)
const remove = (url, options) => {
   return request(url, {
      method: 'DELETE',
      data: options
   })
}

module.exports = {
   get,
   post,
   put,
   remove
}

二、接口地址封装

在untils文件中的untils.js中拼接接口地址,实现接口统一管理。

const  urls = {
 	login:'Login/login',
    getCustomerno :'worker/qrcode',
	tableInter : 'worker/points',
}

三、使用步骤

在js文件中引入request,以及封装好的url地址。
api.post(urls.tableInter接口地址, data与后台交互的参数).then(res => { //拿到数据后对数据的操作以及渲染等 }).catch(err=>{//请求失败的打印})

在js文件中引入request,以及封装好的url地址
import api from '../../utils/request'
import {
   urls
} from '../../utils/util'

调用接口代码
//data中写向后台发送的参数
let data = {
	
}
 api.post(urls.tableInter, data).then(res => {
      //console.log(res)
     //拿到数据后对数据的操作以及渲染等
    }).catch(err=>{
    	//请求失败的打印
    })
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值