uniapp封装并全局挂载request请求

news2024/11/14 18:36:46

前言

日常开发中,前端项目中需要调用服务端api完成页面渲染,uniapp提供的请求api:uni.request相对繁琐;另外服务端提供的不同api仅子路径不同,api域名以及根路径都是相同的,一旦接口api变更,需要更改地方就会很多.鉴于以上可以将uni.request进行封装,简化开发. 目前uniapp项目支持vue2、vue3两个版本，
不论vue2还是vue3，都是可以分为三步：封装request、全局挂载、使用.版本不同挂载处理方式也不相同，下面分别说明对应的实现：

1.封装请求

项目跟目录创建untils文件夹,创建api.js,封装如下:

  const BASE_URL="项目固定路径,例如:http://abc.com/api"
  // 向外暴露一个方法 myRequest
  export const myRequest = (options) => { 
      //加载loading
      uni.showLoading({ 
          title:'数据加载中'
      })
      return new Promise((resolve, reject) => { 
          uni.request({ 
              // 开发者服务器接口地址（请求服务器地址 + 具体接口名）
              url: BASE_URL + options.url,
              // 请求方式（若不传，则默认为 GET ）
              method: options.method || 'GET',
              // 请求参数（若不传，则默认为 {} ）
              data: options.data || { },
              // 请求成功
              success: (res) => { 
                  // 此判断可根据自己需要更改
                  if (res.data.status !== 1) { 
                       return uni.showToast({ 
                           title: '获取数据失败！'
                       })
                   }
                  // 响应成功执行
                  resolve(res)
              },
              // 请求失败
              fail: (err) => { 
                  uni.showToast({ 
                      title: '请求接口失败！'
                  })
                  // 响应失败执行
                  reject(err)
              },
              //请求结束之后，执行的回调函数（成功或失败都会执行）
              complete() { 
                  //隐藏loading
                  uni.hideLoading()
              }
          })
      })
  }

2.全局挂载

     全局挂载都是在main.js中实现,挂载方式会因为项目vue版本不同有所差异,vue2可以使用Vue.prototype,但是vue3中不可以,具体原因可以参考官方文档:https://cn.vuejs.org/api/application.html#app-config-globalproperties.
     查看项目vue版本方式参考如下路径:
     项目跟目录中manifest.json中按照如下查看:
在这里插入图片描述

vue2中main.js挂载实现方式:

import App from './App'

// 以下在vue3外生效
// #ifndef VUE3
import Vue from 'vue';
import {myRequest} from './utils/app.js';

// 生产环境禁用常见的错误提示
Vue.config.productionTip = false

// 挂载myRequest
Vue.prototype.$myRequest=myRequest

App.mpType = 'app'
// 创建vue实例
const app = new Vue({
    ...App
})
// 挂载vue实例
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

vue3中main.js挂载方式:

import App from './App'

// 以下在vue3外生效
// #ifndef VUE3
import Vue from 'vue';
// 生产环境禁用警告来帮你对付常见的错误与陷阱
Vue.config.productionTip = false

App.mpType = 'app'
// 创建vue实例
const app = new Vue({
    ...App
})
// 挂载vue实例
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue';
// 导入myRequest
import {myRequest} from './utils/app.js';
export function createApp() {
  const app = createSSRApp(App)
  // 挂载$myRequest
  app.config.globalProperties.$myRequest = myRequest;
  return {
    app
  }
}
// #endif

3.封装request调用方式

this.$myRequest代替uni.request

  this.$myRequest({
                 url: '/news/detail.php?cid=52&id=258'
             }).then(res => { 
                console.log("返回数据"+JSON.stringify(res));
             }).catch(err => { 
                 console.log(err)
             });