uniapp的request请求封装

目录结构

封装代码

http.js

const baseUrl = 'https://www.example.com';//基础地址

export const request = (options) => {
	let token = 'Bearer ' + uni.getStorageSync('token');
	return new Promise((resolve,reject)=>{
		uni.request({
			url: baseUrl + options.url,
			method: options.method || "GET",
			header: options.method == 'POST' ? {
				"Authorization": token,//自定义请求头信息,后端需要什么就定义什么
				"X-Requested-With": "XMLHttpRequest",
				"Accept": "application/json",
			    "Content-Type": "application/json; charset=UTF-8",
			} : {
				"X-Requested-With": "XMLHttpRequest",
				"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
			},
			data:options.data || {},
			dataType:options.dataType || "json",
			success: (res) => {
				if(res.statusCode !== 200){
					return uni.showToast({
						title:"获取数据失败"
					})
				}
				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title:"接口请求失败"
				})
				reject(err)
			}
		})
	})
}

全局引入

main.js

import Vue from 'vue'
import App from './App'
import {request} from './utils/http.js'
Vue.config.productionTip = false

App.mpType = 'app'

Vue.prototype.$api  = request

const app = new Vue({
    ...App
})
app.$mount()

使用示例

this.$api({
	url: '/api/example/getexample',
	method: 'POST',
	data: {
		"pageIndex": 1,
		"pageSize": 10,
	},
}).then((res)=>{
	console.log(res)
})