uni-app 用Promise 封装项目异步请求

Myth丶恋晨 2023-01-03 14:01 534阅读 0赞

## 为什么要封装？ ##

*  原生的请求不支持Promise，只能使用 .then() 的方式；
 *  uni-app 的请求不能方便的添加 **“请求中”** 的效果，也就是等待中。。。的特效；
 *  uni-app 的请求值是个数组，不方便；

## 封装思路 ##

*  基于原生Promise 封装；
 *  挂载到Vue 原型上；
 *  通过 this.request 的方式来请求；

**1，在和pages同级目录下新建 utils 文件夹，新建request.js文件，在文件中封装Promise**

export default (params)=>{ 
        // 加载中
        uni.showLoading({ 
            title:'加载中'
        })
        return new Promise((resolve, reject)=>{ 
            wx.request({ 
                // 此处简写url,data等，只接受一个形参 params
                ...params,
                success(res){ 
                	// 如果成功 则返回一个数据，在this.request().then(res=>{})的then中接受
                    resolve(res.data)
                },
                fail(err){ 
                    reject(err)
                },
                // complete方法是无论成功还是失败最后都要执行的
                complete(){ 
                    // 关闭加载中的特效
                    uni.hideLoading()
                }
    
            })
        })
    }

**2，在main.js 中引入封装好的 Promise，并把它挂载到Vue上**

import request from './utils/request'
    Vue.prototype.request = request

**3，之后便可以在应的页面中去使用，例如需要在页面加载的时候请求,，后面的 .then执行Promise的链式调用**

onLoad(){ 
          this.request({ 
              url:"https://www.runoob.com/try/ajax/json_demo.json"
          }).then(res=> {   
              console.log(res)
          }).catch(err=>{ 
              console.log(err)
          })
      },