小程序封装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=>{
//请求失败的打印
})