[JavaScript知识库]uniapp接口请求封装

uniapp接口请求封装

//功能：暴露接口

const BASE_URL = 'http://43.129.176.116:8787' //域名或选取所有接口不变的那一部分
export const myRequest = (options) => { //暴露一个function：myRequest，使用options接收页面传过来的参数
        return new Promise((resolve, reject) => { //异步封装接口，使用Promise处理异步请求
            uni.request({ //发送请求
                url: '/dpc' + options.url, //接收请求的API
                method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
                data: options.data || {}, //接收请求的data,不传默认为空
                success: (res) => { //数据获取成功
				/*
                    if (res.data.meta.status !== 200) { //因为200是返回成功的状态码，如果不等于200,则代表获取失败,
                        return uni.showToast({
                            title: "数据获取失败！"
                        })
                    }
					*/
				   console.log(res)
                    resolve(res) //成功,将数据返回
                },
                fail: (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(){
				
				
				   const res = await this.$myRequest({//调用封装好的API请求函数
				                    url:'/sys.php',//把接口传过去
				                    method:'POST',
				                })
	
					//这里只需要传入不同的接口地址就可以
					console.log(res.data);
				},