uni-app项目中request请求封装和使用（promise）

迷南。 2021-07-24 14:39 725阅读 0赞

# uni-app项目中request请求封装和使用（promise） #

**开发时我们使用本地的请求地址，而在项目上线时会使用线上的地址，并且每个请求所含的参数和请求方式都不大相同，那么在开发时对请求进行封装就是必要的了**  
![在这里插入图片描述][2020040808434424.png_pic_center]  
如图所示，先新建文件夹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);
    	},
     }

[2020040808434424.png_pic_center]: /images/20210724/958b07ba69574143a99fa63d4e5d757f.png