uni-app vue3接口请求怎么封装

export default "https://XXXX.test03.qcw800.com/api/"

export function https(opts, data) {	let httpDefaultOpts = {		url: opts.url,		data: data,		method: opts.method,		header: opts.method == 'get' ? {			'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'		},		dataType: 'json',	}	let token = uni.getStorageSync('token');	if (token != undefined && token != null && token != '') {		httpDefaultOpts.header.Authorization = 'Bearer ' + token;	}	let promise = new Promise(function(resolve, reject) {		uni.request(httpDefaultOpts).then(			(res) => {				// console.log(res, '成功')				if(res.statusCode == 401){					uni.clearStorageSync();				}				resolve(res)			}		).catch(			(response) => {				// console.log(response, '失败')				reject(response)			}		)	})	return promise}

export const rootUrl="https://ssss.test03.qcw800.com";  //其他接口域名export const baseUrl= rootUrl + "api/";export const api = {	// 获取验证码	guest:{ 		url: rootUrl + '/api/public/guest',		method: 'GET'	},	// 登录	login:{  		url: rootUrl + '/api/user/login',		method: 'GET'	}}

import App from './App'// #ifndef VUE3import Vue from 'vue'Vue.config.productionTip = false;  //设置为 false ，可以阻止 vue 在启动时生成生产提示App.mpType = 'app'const app = new Vue({	...App})app.$mount()// #endif// #ifdef VUE3import {	createSSRApp} from 'vue'import {	toast,	nav,	checkMobile,	onuploadFile} from '@/api/functions.js'import {	api,	rootUrl} from '@/api/api.js' // API 链接import {	https} from '@/api/http.js' // 请求方式中间件import navigationBar from '@/components/navigationBar.vue'import publicContext from '@/components/publicContext.vue'export function createApp() {	const app = createSSRApp(App)	app.component('navigationBar', navigationBar);	app.component('publicContext', publicContext);	app.config.globalProperties.$toast = toast;	app.config.globalProperties.$nav = nav;	app.config.globalProperties.$add = add;	app.config.globalProperties.$checkMobile = checkMobile;	app.config.globalProperties.$isEmpty = isEmpty;	app.config.globalProperties.$formatFloat = formatFloat;	app.config.globalProperties.$api = api;	app.config.globalProperties.$rootUrl = rootUrl;	app.config.globalProperties.$http = https;	app.config.globalProperties.$imgUrl = 'https://qianchao-sheke.oss-cn-hangzhou.aliyuncs.com/'	return {		app	}}// #endif

this.$http(this.$api.messageList,{					api_token:uni.getStorageSync('token'),					pageSize:10,                    page:1				}).then(res=>{					console.log(res,'返回参数');				})

export function toast(title){	uni.showToast({		icon:'none',		title:title,		position:'bottom',	})}//校验手机格式 export function checkMobile(mobile){	return RegExp(/^1[34578]d{9}$/).test(mobile);}export function nav(url,type=0){	if(type == 0){		uni.navigateTo({			url:url		})	}else if(type == 1){		uni.switchTab({			url:url		})	}else if(type == 3){		uni.navigateBack({		})	}else if(type == 4){		uni.redirectTo({			url: url		});	}else if(type == 5){		uni.reLaunch({			url		});	}}// 上传图片export function onuploadFile(){	var _this = this;	uni.chooseImage({		count: 1, //默认9		sizeType: ['original', 'compressed'],		sourceType: ['album', 'camera'],		success: (res) => {			// console.log(res.tempFilePaths,'图片的本地文件路径列表',_this.$rootUrl);			uni.uploadFile({				url: _this.$rootUrl +'/api/public/upload',//上传图片的地址				filePath: res.tempFilePaths[0],//这里是图片的本地文件路径列表（选择图片成功的时候可以拿到,在上边的success回调中res.tempFilePaths即可拿到）				name: 'file',//上传的名字叫啥都行				// headers: {				// 	accessToken:'' //可以设置你的请求头的token噢				// },				success(res) {					//上传成功的回调					// console.log('上传成功',res)					var data = JSON.parse(res.data);					return data.data[0];				},				fail(err){					console.log(err,'上传失败');				},				complete(result){					console.log(result,'上传结果');				}			})		}	});}

npm install --save axios vue-axios

import axios from "axios";//创建一个axios的对象import { useRouter } from "vue-router";import { inject } from "vue";//生成一个axios的实例const http=axios.create({	baseURL:"https://xxxx.test03.qcw800.com",// baseURL会在发送请求的时候拼接在url参数前面	timeout:6000,//请求超时});// http.defaults.headers['api_token'] = localStorage.getItem('token') || '' //在请求头中传入tokenhttp.interceptors.request.use(config => {     // console.log(config,'请求拦截');  return config;}, err => {   return Promise.reject(err)})//响应拦截器http.interceptors.response.use(response => {	//console.log(response,'响应拦截');	return response;  }, err => { 	return Promise.reject(err)  })export default http;//导出

//导入request.jsimport request from "@/request/index";//登录export const login = (params) => request.get("/api/user/login",{params});//获取个人信息export const userDetail = (params) => request.get("/api/user/detail",{params});//方法二 在api文件里出来异步请求// export const getCategory=async()=>{// 	const res=await request.get(`/category/`);// 	return res.data;// };

<script>import { defineComponent,onMounted } from 'vue'import { userDetail } from '@/request/api'export default defineComponent({  setup() {    onMounted(()=>{      userDetail({api_token:localStorage.getItem('token')}).then(res=>{            console.log(res,'个人信息');        })    })  }})</script>

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({  transpileDependencies: true,  devServer: {    port: 8080, // 端口号    open: false, //配置是否自动启动浏览器    https: false,// https:{type:Boolean}是否启用https    proxy: {      // 代理      "/api": {        target: "https://xxxx.test03.qcw800.com",     //要代理访问的路径        changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题        ws: true,//是否启用websockets，用不到可设为false        pathRewrite: {          "^/api": ""//这里理解成用'/api'代替target里面的地址,比如我要调用'http://192.168.0.45:8088/user/getuserlist'，直接写'/api/user/getuserlist'即可        }      }    }  },})