uni |
您所在的位置：网站首页 › uniapp如何请求接口 › uni |
uni
|
uni-app vue3接口请求怎么封装
发布时间：2023-05-04 10:09:19
来源：亿速云
阅读：98
作者：iii
栏目：开发技术
这篇文章主要介绍“uni-app vue3接口请求怎么封装”，在日常操作中，相信很多人在uni-app vue3接口请求怎么封装问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”uni-app vue3接口请求怎么封装”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ uni-app接口，全局方法封装1.在根目录创建一个api文件，在api文件夹中创建api.js，baseUrl.js和http.js文件
2. baseUrl.js文件代码 export default "https://XXXX.test03.qcw800.com/api/"3.http.js文件代码 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 }4.api.js文件代码 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' } }5.在main.js文件中引入接口文件 import App from './App' // #ifndef VUE3 import Vue from 'vue' Vue.config.productionTip = false; //设置为 false ，可以阻止 vue 在启动时生成生产提示 App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // #endif // #ifdef VUE3 import { 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 } } // #endif6.接口请求 this.$http(this.$api.messageList,{ api_token:uni.getStorageSync('token'), pageSize:10, page:1 }).then(res=>{ console.log(res,'返回参数'); })另外，封装的全局方法，上面第五步在main文件中已经引入， 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,'上传结果'); } }) } }); }vue3接口请求封装1.在项目中安装axios npm install --save axios vue-axios2.在src文件夹下创建request文件夹，及index.js和api.js文件
3.index.js文件代码 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') || '' //在请求头中传入token http.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;//导出4.api.js文件代码 //导入request.js import 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; // };5.接口请求 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,'个人信息'); }) }) } })会了不！！ 等会还有解决跨域问题，代理代码 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'即可 } } } }, })到此，关于“uni-app vue3接口请求怎么封装”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！ 推荐阅读： uni-app如何使用 怎么用uni-app制作小程序实现左右菜单联动效果免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 uni-app vue3 上一篇新闻：Vue组件设计Sticky布局效果怎么实现 下一篇新闻：VUE中常用的高级方法有哪些 猜你喜欢 美妆小程序开发的价值有哪些 php如何把匿名函数当作参数传递 装饰装修小程序开发可以给商家带来哪些价值 旅游小程序如何提高游客服务体验 C语言如何求余数运算 php如何在普通函数中返回匿名函数 php如何在匿名函数中引用局部变量 医美小程序开发有哪些功能 酒水行业小程序开发的基础功能有哪些 教育培训小程序开发的基础功能有哪些 |
【本文地址】
今日新闻 |
推荐新闻 |