Uniapp uni-api框架(十四)

uni-api

• 原生的微信小程序都是不支持 promise

• uni-app 对大部分的小程序的原生 api 都做了封装,使之支持 promise

• 使用方式:

  1. 原生的微信小程序 wx.request

  2. uni-api 的方式 uni.request

  3. 其他 api 的使用方式页类似

原生小程序

wx.request({
  url: 'https://xxxxx.com/api/styles/xxxx/xxx',
  success(res) {
    console.log(res)
  },
})

uniapi 方式

• 它的返回值是一个数组 [null,数据]

• 第一个 null 就表示成功,数据才是我们要的

uni
  .request({
    url: 'https://xxxxx.com/api/styles/xxxx/xxxx',
  })
  .then((res) => {
    console.log(res)
  })

封装自己的异步请求

• 基于原生的 promise 来封装

• 挂载到 Vue 的原型上

• 通过 this.request 的方式来使用

封装

• 新建立一个 utils 文件夹 里面新建一个文件 request.js,里面的代码如下

export default (params) => {
  //加载中
  uni.showLoading({
    title: '加载中',
  })
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      },
      complete() {
        uni.hideLoading()
      },
    })
  })
}

挂载

• 找到 main.js 里面挂载函数

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

使用的时候

  onLoad () {
    this.request({
      url: "xxxx",
    }).then((res) => { console.log(res) })
  }