利用async + await封装uni-app网络请求

一只小欧追

已于 2024-03-19 09:50:11 修改

阅读量1.4k

点赞数

文章标签： es6 uni-app 前端 javascript

于 2020-04-18 01:40:09 首次发布

本文链接：https://blog.csdn.net/weixin_44005354/article/details/105592391

版权

// /common/requeat.js
var url = "请求域名"
// option           ========>  object
// option.url       =>    url地址               =>     string                             =>    必填
// option.method    =>    请求方式，            =>      string 取值 GET POST 默认POST      =>    选填
// option.header    =>    请求header头          =>      object                            =>    选填
// option.data      =>    请求参数              =>      object                            =>    选填
// option.loading   =>    是否显示加载动画       =>      boolean 取值true false 默认false   =>    选填
// option.loadtext  =>    加载提示语            =>       string  默认 加载中...            =>    选填
// option.msg       =>    请求失败提示语        =>       string  不穿即不显示 默认空       =>     选填

export default class api {
  syncRequest = function(option) {
    option.method = option.method ? option.method : "POST"
    option.header = option.header ? option.header : {}
    option.data = option.data ? option.data : {}
    option.loading = option.loading ? true : false,
    option.loadtext = option.loadtext ? option.loadtext : '加载中...'
    if (option.method == "GET") {
      option.header['Content-Type'] = 'application/json;charset=UTF-8'
    } else {
      option.header['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    if (option.loading) {
      uni.showLoading({
        mask: true,
        title: option.loadtext
      })
    }
    return new Promise((resolve, reject) => {

      uni.request({
        url: url + option.url,
        method: option.method,
        header: option.header,
        data: option.data,
        success: (res) => {
          if (option.loading) {
            uni.hideLoading()
          }
          if (res.statusCode == 200) {            
            resolve(res);            
          } else {
            if (option.msg) {
              uni.showToast({
                icon: "none",
                title: option.msg
              })
            }
          }

        },
        fail: (err) => {
          if (option.loading) {
            uni.hideLoading()
          }
          if (option.msg) {
            uni.showToast({
              icon: "none",
              title: option.msg
            })
          }
          reject(err)
        }
      });
    })
  }
}

//main.js
import Request from './common/request.js'
let request = new Request()
Vue.prototype.$api = request

//index.vue

<button type="default" @tap="request">点击</button>

async request(){
  var data = await this.$api.syncRequest({
  	//除了url必填其他都是选填
    url:'/index/index/index',//接口
    loading:true,//显示加载图
  })
  console.log(data);
},