uni-app项目中request请求封装和使用(promise)
开发时我们使用本地的请求地址,而在项目上线时会使用线上的地址,并且每个请求所含的参数和请求方式都不大相同,那么在开发时对请求进行封装就是必要的了
如图所示,先新建文件夹util,在util下新建js文件api.js
1. 请求接口地址
请求接口在开发时使用本地接口,而在线上时就是用线上的在线接口,如果不做封装,那么在上线之前就要对每一个请求地址进行修改,降低了工作效率。
const BASE_URL="http://localhost:8082"; //开发时使用本地接口,在上线时只需要修改此处接口为线上地址即可
2. 请求函数封装
const BASE_URL="http://localhost:8082"; //开发时使用本地接口,在上线时只需要修改此处接口为线上地址即可
export const myRequest=(options)=>{ //传入的options是一个json对象
return new Promise((resolve,reject)=>{
uni.request({
url:BASE_URL+options.url,
method:options.methods||"GET",
data:options.data || {},
dataType:options.dataType || "json",
success: (res) => {
if(res.data.status !== 0){
return uni.showToast({
title:"获取数据失败"
})
}
resolve(res)
},
fail: (err) => {
uni.showToast({
title:"接口请求失败"
})
reject(err)
}
})
})
}
因为要在不同的页面调用请求函数,所以函数必须暴露出来
3. 使用
1. 在页面中引入
因为会在不同的页面使用,所以在使用时在全局引入时最好的,只需要引入一次,不需要在每个页面都引入了,所以在main.js中引入
main.js
import Vue from 'vue'
import App from './App'
import { myRequest } from './util/api.js'
Vue.prototype.$myRequest = myRequest
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
2. 使用
因为引入接口函数api.js的时候时全局引入,所以在页面内不用引入了,直接使用就可以了
index.vue
methods: {
async getSwiper(){
const res = await this.$myRequest({
url:'/api/getlunbo'
})
//这里只需要传入不同的接口地址就可以
console.log(res);
},
}