直接上代码
一、建立一个https.js文件(接口地址根据自己的地址填写)
// 区分开发环境和生产环境 接口地址
let baseUrl;
if (process.env.NODE_ENV === 'development') {
baseUrl = 'xxxxxxxxxxx' // 开发环境
} else {
baseUrl = 'xxxxxxxxxxx' // 生产环境
}
export function https(config) {
//显示loading
wx.showLoading({
title: '加载中...'
});
//设置请求头
config.header = {
'content-type': 'application/json',
};
//检查缓存中有没有token
var token = wx.getStorageSync('token');
if (token != '') {
header.Authorization = token
}
config.url = baseUrl + config.url; // 请求地址
let promise = new Promise(function(resolve, reject) {
uni.request(config).then(res => {
wx.hideLoading() //隐藏loading
if (res[0]) {
uni.showToast({
title: "数据获取失败",
icon: "none",
duration: 1500
})
resolve(false);
} else {
let data = res[1].data;
if (data.code == 1) {
resolve(data);
} else {
resolve(data);
}
}
}).catch(error => {
wx.hideLoading() //隐藏loading
reject(error);
})
})
return promise
}
二、再建立一个api.js文件,引入刚刚封装好的https.js文件。api是作为一个接口集
import {https} from '@/components/api/https.js'; // 引入刚刚封装好的https
class api{
async getList(data) {
const res = await https({
method: "get", // 请求方式
url: '/getJoke', // 请求url
data: data,// 参数
})
return res
}
// 下面可以接着写API接口集
// 接口二
// 接口三
// ......
}
export default new api()
三、main.js全局引用刚刚封装好的API接口集,绑定到原型
import api from './components/api/api.js'
Vue.prototype.$dy_api = api
四、页面调用(没有参数可不写)
getData(){
this.$dy_api.getList({page:"1",count:"2",type:"video"}).then((res)=>{
console.log(res)
})
}
请求结果图