第一步:在根目录下创建request文件夹,并在文件夹下创建request.js
第二步:将以下代码放入request.js中
// 定义请求地址
const BASE_URL = "https://xxx.com/" //后台API地址
// 封装请求方法
const request = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + options.url,
method: options.method || 'GET',
header: {
authtoken: '2c9080345f3d6b62015f3d774e59000d:4711be44a1dac5b4571f39438b3642b9' //可以从vuex或uni.getStorageSync中拿到token
},
data: options.data || {},
success: (res) => {
const data = res.data
if (res.statusCode !== 200) {
handleStatus(res) //处理状态码
return
}
resolve(data)
},
fail: (error) => {
uni.showToast({
icon: 'error',
title: '系统错误'
})
reject(error)
},
complete: (res) => {
}
})
})
}
const handleStatus = (res) => {
switch (res.statusCode) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
uni.navigateTo({
url: ''
})
return
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
uni.showToast({
icon: 'error',
title: res.data.resultMsg
})
break;
// 404请求不存在
case 404:
break;
// 其他错误,直接抛出错误提示
default:
}
}
export function get(url, params) {
return new Promise((resolve, reject) => {
request({
url: url,
method: 'GET',
data: params,
}).then(res => {
resolve(res);
}).catch(err => {
reject(err)
})
});
}
export function post(url, params, responseType) {
return new Promise((resolve, reject) => {
request({
url: url,
method: 'POST',
data: params,
})
.then(res => {
resolve(res);
})
.catch(err => {
reject(err)
})
});
}
第三步:创建api文件夹并生成api.js
api.js中引入封装好的get和post方法
import { get, post } from '@/request/request.js'
export const getEventLabelDict = obj => get("labeling/xxxx/xx/xxxxx",obj)
第四步:页面中调用接口即可
<template>
<view>
</view>
</template>
<script>
import {
getEventLabelDict
} from "../../api/api";
export default {
data() {
return {
}
},
created() {
getEventLabelDict().then((res)=>{
console.log('res',res)
})
},
methods: {
}
}
</script>
<style scoped lang="scss">
</style>
大家可以根据自身需求在请求中添加相关操作~~