uniapp中showLoading如何封装

在uniapp中，可以通过封装一个全局的showLoading方法来实现加载提示的功能。以下是一个示例的封装方法：

在request.js文件中，可以添加一个全局的showLoading方法：

import { showLoading, hideLoading } from 'uni-app'

export default {
  globalRequest(url, method, params) {
    showLoading({
      title: '加载中...'
    })

    // 发起网络请求

    return new Promise((resolve, reject) => {
      uni.request({
        url: url,
        method: method,
        data: params,
        success: res => {
          resolve(res.data)
        },
        fail: err => {
          reject(err)
        },
        complete: () => {
          hideLoading()
        }
      })
    })
  }
}

然后在需要使用showLoading的地方，比如在index.vue中的login方法中，可以直接调用globalRequest方法，并在请求开始时调用showLoading，在请求结束时调用hideLoading：

export default {
  methods: {
    login() {
      let data = {
        name: 'zhangsan',
        password: '111'
      }

      this.$http.post('/api/login', data).then(res => {
        console.log('登录返回信息', res)
      })
    }
  }
}

这样就可以在请求过程中显示加载提示，提高用户体验。
#### 引用[.reference_title]
- *1* [uniapp网络请求封装](https://blog.csdn.net/March_Mango/article/details/120345534)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [uniapp 网络请求封装](https://blog.csdn.net/m0_52459016/article/details/125553148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]