首先创建一个http文件
1.创建一个文件 例:env.js用来设置公共访问的url,即环境地址
//设置公共访问的url.即环境地址
//commonJS规范--node.js采用的就是该规范 引入:require
module.exports={
//开发环境
dev:{
baseUrl:'http://localhost:3000' //例子
},
//测试环境
test:{
baseUrl:'http://www.test.com' //例子
},
//线上环境(公共部分)
prod:{
baseUrl:'https://api.it120.cc'
}
}
//ES6 module --Vue中通常采用ES6的模块化规范 引入:import2.
2.二次封装 ajax请求,创建个request.js(自定义)
//引入env中的url
const { baseUrl } = require('./env').prod
//专用域名
const SubDomain = 'xxx'
module.exports = {
//二次封装wx.request
//url:请求接口的地址//
// methode:请求方式 GET POST
//data:要传递的参数
//isSubdomain:表示是否添加二级子域名
request: (url, method, data, isSubDomain) => {
// console.log('这是我的ajax请求', baseUrl);
let _url = `${baseUrl}/${isSubDomain ? SubDomain : ''}${url}`;
// console.log(_url)
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中'
})
wx.request({
url: _url,
data: data,
method: method,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success(res) {
// console.log(res)
resolve(res)
wx.hideLoading()
},
fail() {
reject('接口请求错误')
}
})
})
},
}
3.创建一个api.js文件
//引入reuest请求
const { request } = require('./request')
//基于业务封装的数据请求
module.exports = {
/**
* 列表数据方法
*/
getList: ( id ) => {
// console.log('获取商品列表接口')
return request('/goods/list', 'GET', { id }, true);
},
}
4.在需要请求数据的页面中调用即可
const { getList } = require("../../http/api.js")
//引用我们要调用的方法
/*** 生命周期函数--监听页面加载*/
onLoad: function () {
//假如需要传递参数 => id
例:let id = 21321
// 调用方法
getList( id ).then(res => {
this.setData({
getList: res.data
})
})
},
````