uniapp接口请求封装

uniapp接口请求封装

//功能：暴露接口  判断是开发模式 development 开发模式  product 生产模式

const url=process.env.NODE_ENV=='development'?'/dpc':'http://xx.xx.xx.xx:8787';

export const myRequest = (options) => { //暴露一个function：myRequest，使用options接收页面传过来的参数
        return new Promise((resolve, reject) => { //异步封装接口，使用Promise处理异步请求
            uni.request({ //发送请求
                url: url + options.url, //接收请求的API
                method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
				header: {
					'content-type': 'application/x-www-form-urlencoded', 
				}, //post要添加header
                data: options.data || {}, //接收请求的data,不传默认为空
				sslVerify:false,
                success: (res) => { //数据获取成功
				/*
                    if (res.data.meta.status !== 200) { //因为200是返回成功的状态码，如果不等于200,则代表获取失败,
                        return uni.showToast({
                            title: "数据获取失败！"
                        })
                    }
					*/
			
                    resolve(res) //成功,将数据返回
                },
                fail: (err) => { //失败操作
				console.log(err)
                    uni.showToast({
                        title: "请求接口失败！"
                    })
                    reject(err)
                }
            })
        })
    }
 
/*下面代码不作用途：仅参照演示，模仿页面调用函数，将实参传进myRequest，也就是上面myRequest使用(options)接收。
myRequest({
    url: '/getInfo',
    method: 'POST',
})
*/

main.js引入 

import {myRequest} from './util/api.js'
Vue.prototype.$myRequest = myRequest

解决跨域

module.exports = {
	devServer:{
		port:'8080',
		disableHostCheck:true,
		proxy:{
			'/dpc':{
				target:'http://xx.xx.xx.xx:8787',
				changeOrigin:true,
				pathRewrite:{
					'^/dpc': ''
				}
			}
		}
	}
}

组件应用

	async getSwiper(obj){
				
				
				   const res = await this.$myRequest({//调用封装好的API请求函数
				                    url:'/sys.php',//把接口传过去
				                    method:'POST',
                                    data:obj   //传参数
				                })
	
					//这里只需要传入不同的接口地址就可以
					console.log(res.data);
				},