首页
   /       /   
uni-app请求封装
5月
11
uni-app请求封装
作者:大彭Sir    分类: 教学教程

案例简介

基于promise封装请求
基于promise封装请求,使用async await语法糖,参考插件市场,插件ID:niudandan-promise

详细使用

api.js

const BASE_URL = '你的域名';
export const myRequest = (options)=>{
    let token = uni.getStorageSync('token')
    return new Promise((resolve,reject)=>{
        uni.request({
      url: BASE_URL + options.url, // 将接口地址分为两部分,这样如果域名改变了好维护,接口地址从options中获取
      header: {
        token: token,
      } || {},
      method: options.method || 'GET',//默认Get
      data: options.data || {},// data从options中获取,如果没有传入data, 则默认一个空对象
      success: (res) => {
        if (res.data.code === 1401) {
        } else {
          res
        }
        resolve(res);
      },
      fail: (err) => {
        uni.showToast({
          title: '请求接口失败',
        });
        reject(err);
      },
    });
    })
}

main.js

//这个方法可能每个页面都会用到,我们可以在main.js中引入,
import {myRequest} from 'api.js'
//接收之后,挂载到全局,这样所有的页面都可以调用这个方法
Vue.prototype.$myRequest = myRequest;

使用方法:使用this.$myRequest进行调用

<button type="submit" @click="test()">发送请求</button>

        methods: {
            async test() {
                const res = await this.$myRequest({
                    url: '/api.php'
                })
                this.dataa = res.data
            }
        }
本文标签:标签: VUE promise uniapp 封装
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录