再标准一点,代码和注释再详细一些
时间: 2024-03-09 22:47:33 浏览: 186
好的,下面是一个更详细的Uniapp请求接口封装示例,包括了注释和错误处理:
```javascript
// request.js
/**
* 封装请求接口
* @param {string} url 请求接口地址
* @param {string} method 请求方式,可选值:GET、POST、PUT、DELETE,默认为GET
* @param {object} data 请求参数
* @returns {Promise} 返回Promise对象
*/
function request(url, method = 'GET', data = {}) {
// 将请求方式转换为大写
method = method.toUpperCase()
// 返回一个Promise对象
return new Promise((resolve, reject) => {
// 发起网络请求
uni.request({
url: url,
method: method,
data: data,
header: {
'Content-Type': 'application/json' // 设置请求头为JSON格式
},
success: res => {
// 请求成功,返回数据
if (res.statusCode === 200) {
resolve(res.data)
} else {
// 请求失败,返回错误信息
reject({
code: res.statusCode,
message: res.errMsg
})
}
},
fail: err => {
// 网络请求失败,返回错误信息
reject({
code: -1,
message: err.errMsg || '网络请求失败'
})
}
})
})
}
export default request
```
在上面的示例中,我们定义了一个request函数,用于发起网络请求。在函数参数中,我们设置了三个参数:请求接口地址、请求方式和请求参数。其中,请求方式和请求参数是可选的,默认情况下,请求方式为GET,请求参数为空对象。我们使用Promise对象来处理异步请求,并在请求成功或失败后返回相应的数据。
在请求接口时,我们设置了请求头为JSON格式。在请求成功时,如果返回的状态码为200,则表示请求成功,我们将返回的数据传递给resolve函数。如果返回的状态码不为200,则表示请求失败,我们将返回错误信息,包括状态码和错误消息。
在请求失败时,我们也返回错误信息,包括错误代码和错误消息。如果网络请求失败,则将错误消息设置为"网络请求失败"。
在页面中调用request函数时,可以这样使用:
```javascript
// index.vue
import request from '@/utils/request.js'
export default {
data() {
return {
userInfo: {}
}
},
mounted() {
this.getUserInfo()
},
methods: {
getUserInfo() {
request('/user/info', 'GET', { id: 123 })
.then(res => {
this.userInfo = res
})
.catch(err => {
console.log(err)
uni.showToast({
title: err.message,
icon: 'none'
})
})
}
}
}
```
在上面的示例中,我们引入了request.js文件,并在页面中使用request函数来发起网络请求。在请求成功时,我们将返回的数据赋值给userInfo变量。在请求失败时,我们将错误信息打印出来,并使用uni.showToast()方法来显示错误提示。
阅读全文