一、utils文件夹中的request.js
import store from '@/store' // 引入store对象
import config from '@/config' // 引入配置文件
import { getToken } from '@/utils/auth' // 引入获取token的函数
import errorCode from '@/utils/errorCode' // 引入错误码映射表
import { toast, showConfirm, tansParams } from '@/utils/common' // 引入通用函数
let timeout = 10000 // 设置默认超时时间为10000ms
const baseUrl = config.baseUrl // 获取基础URL
const request = config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
config.header = config.header || {}
if (getToken() && !isToken) {
config.header['Authorization'] = 'Bearer ' + getToken()
}
// get请求映射params参数
if (config.params) {
let url = config.url + '?' + tansParams(config.params)
url = url.slice(0, -1)
config.url = url
}
console.log("========== 请求头 ==========");
console.log(config.header);
return new Promise((resolve, reject) => {
uni.request({
method: config.method || 'get', // 请求方法,默认为get
timeout: config.timeout || timeout, // 请求超时时间
url: config.baseUrl || baseUrl + config.url, // 请求的完整URL
data: config.data, // 请求的数据
header: config.header, // 请求头
dataType: 'json' // 返回的数据类型
}).then(response => {
let [error, res] = response // 解构出响应的错误和数据
if (error) {
toast('后端接口连接异常') // 显示提示信息
reject('后端接口连接异常') // 返回错误信息
return
}
const code = res.data.code || 200 // 获取响应状态码,默认为200
const msg = errorCode[code] || res.data.msg || errorCode['default'] // 获取响应消息,默认为错误码映射表中的default值
if (code === 401) {
showConfirm('登录状态已过期,您可以继续留在该页面,或者重新登录?').then(res => { // 显示确认对话框
if (res.confirm) {
store.dispatch('LogOut').then(res => { // 调用store中的LogOut方法退出登录
uni.reLaunch({ url: '/pages/login' }) // 重新加载登录页面
})
}
})
reject('无效的会话,或者会话已过期,请重新登录。') // 返回错误信息
} else if (code === 500) {
toast(msg) // 显示错误信息
reject('500') // 返回错误信息
} else if (code !== 200) {
toast(msg) // 显示错误信息
reject(code) // 返回错误码
}
resolve(res.data) // 返回响应数据
})
.catch(error => {
let { message } = error // 解构出错误消息
if (message === 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
toast(message) // 显示错误信息
reject(error) // 返回错误
})
})
}
export default request
二、api文件夹下添加pd.js
import request from '@/utils/request'
// 登录方法
// export function login(username, password, code, uuid) {
export function pd() {
console.log("pd.js");
const data = {}; // 后台api传参数
return request({
'url': '/Business/GoodsInventoryDetail/UserDtl', // api地址
headers: {
isToken: true // 是否难证token
},
'method': 'post',
'data': data // 后台api传参数
})
}
三、vue文件中的调用事件
1、html
<view class="box" @click="pdBh">
获取后台数据
</view>
2、js
<script>
import {pd} from '@/api/pd' // 导入pd.js
export default {
data() {
return {
pdInfo:{
goodsInventoryID:"2", // 参数1
goodsIDs:"5935", // 参数2
inventoryWay:"1" // 参数3
}
}
},
methods: {
// 事件
async pdBh() {
this.pdInfo.goodsInventoryID=this.TotalData.goodsInventoryID; // 参数1
this.pdInfo.goodsIDs=m_bh; // 参数2
this.pdinfo.inventoryWay="1"; // 参数3
pd(this.pdInfo).then(res => {
console.log("执行成功!");
console.log(res);
}).catch(error => {
alert("失败!");
})
}
}
}
</script>