首先我们在项目根目录下建立config.js
config.js参考代码
const config = {
api_base_url:'http地址',//接口前拼接的域地址
}
export {config}
利用export导出config
之后我们在项目根节点建立文件夹util 在util下建立http.js
在http.js中导入config.js中的config
需要注意的是 用ES6导入的文件是不能用绝对路径的
import {config} from "../config.js"
之后我们在http.js中封装一个发请求的类
class HTTP{
request(params){
return new Promise((resolve,reject) =>{
wx.request({
url: config.api_base_url+params.url,
method:params.method,
data:params.data,
header: {
"content-type":"applion/json",
"appkey": 用户的 AppKey身份验证信息 建议放在缓存里
},
success:(res)=>{
let Code = res.statusCode.toString()
if(Code.startsWith("2")){
resolve(res.data);
}else{
wx.showToast({
title:"服务器错误请稍后重试",
icon:"none",
duration:2000
})
reject(res);
}
},
fail:(err)=>{
wx.showToast({
title:"发送请求失败",
icon:"none",
duration:2000
})
reject(err);
}
})
})
}
}
export default HTTP
然后 我们在根目录下创建一个 api 文件夹 然后 创建一个bookApi.js
例如 我们要定义一个getAll 请求方法
先引入刚才的http 然后 new创建实例对象
然后在方法中调用request发送请求 记得这个data?data:{}不能漏 因为 可能用户不传参数
import HTTP from "../utils/http"
let http = new HTTP();
export const getAll = (data)=> {
return http.request({
url:'请求地址',
method:'get',
data: data?data:{}
})
}
然后 我们就可以在组件中调用了
import {getAll} from "../../api/bookApi";
Page({
data: {
},
onLoad() {
this.getUserProfile();
},
getUserProfile() {
getAll().then(res=>{
console.log(res.data);
}).catch(err => {
console.error("请求失败",err);
});
}
})