主要思路:
实现接口的拼接:分为 ‘ 固定接口 ’拼接和‘ 随意接口 ’拼接
如何实现接口的拼接:分为三次拼接:
1.创建一个env.js,里面写自己前面默认的接口地址,可以定义一些配置其他环境的接口
eg:baseUrl:“https://api.it120.cc”
2.创建一个request.js,可以在里面设置一些自己默认配置的一截
eg:const subName = ‘随意设置的,看需求是啥样的’
let _url = ${baseUrl}/${isDoMain?subName:''}${url}
3.创建一个api接口,在里面拼接前面的接口,并且添加公司所给的接口地 址,并且在这个文件里面可以接受传递过来的参数
eg:// 商品列表
getList:()=>{
return request("/shop/goods/list","",{},true)
},
主要代码如下:
env.js
module.exports={
//开发环境url
dev:{
baseUrl:"http://localhost:3000"
},
//测试环境得url
test:{
baseUrl:"http://www.test.com"
},
// 线上环境url
prod:{
baseUrl:"https://api.it120.cc"
}
}
request.js
const {baseUrl} = require("./env").prod
const subName = '随意配置的'
module.exports={
request:(url,method="GET",data={},isDoMain)=>{
wx.showLoading()
let _url = `${baseUrl}/${isDoMain?subName:''}${url}`
return new Promise((resolve,reject)=>{
wx.request({
url: _url,
data:data,
method:method,
header:{
'content-type':'application/x-www-form-urlencoded'
},
success:res=>{
let {code} = res.data
if(code===0||code===700){
resolve(res);
wx.hideLoading()
}else{
wx.showToast({
title: '请先登录',
icon:'none'
})
}
},
fail:res=>{
reject('接口有误请检查')
}
})
})
}
}
api.js 配置接口的主要文件
const {request} = require("./request")
module.exports={
// 商品列表
getList:()=>{
return request("/shop/goods/list","",{},true)
},
// 详情页
getDetail:(id)=>{
return request("/shop/goods/detail","",{id},true) // 需要传递参数的
},
}
怎么调用?
const {getList,getDetaill} = require("../../http/api")
如何使用?
getList().then((res)=>{
console.log(res.data.data) // 获取的数据
this.setData({
list:res.data.data
}) // 把获取到的数据进行更新
})
传参?
eg: let token=wx.getStorageSync(‘token’)
getList(token).then((res)=>{})
在调用方法的时候传递参数,在api.js文件里面进行接受