uniapp如何封装请求并且引入全局
时间: 2023-08-15 09:07:49 浏览: 166
uniapp-request.zip-Promise方式封装uniapp请求
Uniapp可以通过封装请求并引入全局来实现全局调用请求的功能。下面是具体步骤:
1. 在common文件夹下新建一个request.js文件,用于封装请求。
2. 在request.js文件中使用uni.request()方法进行请求的封装,可以设置请求的header、data、url、method等。
3. 将封装好的请求通过module.exports暴露出去。
4. 在App.vue中引入并挂载request.js文件,使其成为全局变量。
5. 在需要调用请求的地方,通过this.$request进行调用,即可实现全局调用。
下面是一个简单的示例代码:
```javascript
// common/request.js
const baseUrl = 'https://api.example.com'
function request(options) {
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + options.url,
method: options.method || 'GET',
data: options.data || {},
header: options.header || {},
success: res => {
resolve(res.data)
},
fail: err => {
reject(err)
}
})
})
}
module.exports = {
request
}
```
```javascript
// App.vue
import { request } from './common/request.js'
export default {
onLaunch() {
uni.$request = request
}
}
```
```javascript
// pages/index.vue
export default {
mounted() {
this.getData()
},
methods: {
async getData() {
try {
const res = await this.$request({
url: '/user/info',
method: 'POST',
data: {
username: 'example'
}
})
console.log(res)
} catch (err) {
console.log(err)
}
}
}
}
```
以上是一个简单的Uniapp封装请求并引入全局的示例,可以根据实际需求进行修改和完善。
阅读全文