uniapp+uview 网络请求封装_uview 封装请求-优快云博客

uview官网地址👉： Http请求 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

1.在utils文件夹下创建request.js文件，用于封装请求：

module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
		config.baseURL = 'https://xxx:4445/prod-api'; /* 根域名 */
        return config
    })
	
	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
	    // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
	    config.data = config.data || {}
		// 根据custom参数中配置的是否需要token，添加对应的请求头
		// if(config?.custom?.auth) {
			// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
			config.header.Authorization = 'Bearer ' + uni.getStorageSync('token')
			config.header.clientid = uni.getStorageSync('clientid')
		// }
	    return config 
	}, config => { // 可使用async await 做异步操作
	    return Promise.reject(config)
	})
	
	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data
		// 自定义参数
		const custom = response.config?.custom
		if (data.code !== 200 && data.code !== 401) {
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (custom.toast !== false) {
				uni.$u.toast(data.message)
			}
			// 如果需要catch返回，则进行reject
			if (custom?.catch) {
				return Promise.reject(data)
			} else {
				// 否则返回一个pending中的promise，请求不会进入catch中
				return new Promise(() => { })
			}
		}
		return data === undefined ? {} : data
	}, (response) => { 
		// 对响应错误做点什么 （statusCode !== 200）
		return Promise.reject(response)
	})
}

2.main.js中全局引用该文件：

import Vue from 'vue'
import App from './App'
import uView from '@/node_modules/uview-ui';
import share from '@/share.js'

Vue.config.productionTip = false
Vue.config.ignoredElements = ['wx-open-launch-weapp', /^uni-/]
Vue.mixin(share)

App.mpType = 'app'
const app = new Vue({
    ...App
})

// 引入请求封装，将app参数传递到配置中
require('@/utils/request.js')(app)

app.$mount()

3.在utils文件夹下创建api.js文件：

const http = uni.$u.http

// post请求，获取菜单
// export const postMenu = (data) => http.post('/ebapi/public_api/index', data)

// get请求，获取菜单，注意：get请求的配置等，都在第二个参数中，详见前面解释
// export const getMenu = (data) => http.get('/ebapi/public_api/index', {params: data})

// 登录
export const getLogin = (data) => http.post('/auth/maLogin', data)

// 内容管理banner
export const getBannerList = () => http.get('/wx-ma/index/bannerList')

// 内容管理中间的list详情接口
export const getInfo = (platformId) => http.get('/wx-ma/platform/' + platformId)

// 内容公告所有数据
export const getPageList = (data) => http.get('/wx-ma/notice/page',{params:data})

4.页面调用api文件使用：

<script>
	import { getInfo } from '@/utils/api/api.js';
	export default {
		data() {
			return {}
		},
		onShow() {
			this.getData()
		},
		computed: {},
		methods: {
			getData(){
				getInfo(1).then((res)=>{
					if(res.code == 200){
						console.log()
					} else {
						console.log()
					}
				})
			},
		}
	}
</script>

最后：👏👏😊😊😊👍👍