小程序如何封装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/x-www-form-urlencoded' },
         //   header: options.header,
           success(request) {
          
               if (request.data.code === 200) {
                   resolve(request.data.datas)
               } 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=>{
    	//请求失败的打印
    })