首页 > 其他分享 >uniapp 使用axios 二次封装

uniapp 使用axios 二次封装

时间:2023-11-22 16:35:31浏览次数:46  
标签:uniapp axios 封装 url staticVariables Vue isLoading const data

uniapp 使用 axios 二次封装

import Vue from 'vue'
import axios from 'axios'

const baseUrl = 'http://127.0.0.1:8080' // 服务器地址
const imageUrl = baseUrl
const staticVariables = {
  BASE_URL: baseUrl,
  TIME_OUT: 10000,
  SSL_VERIFY: false,
  DURATION: 500,
  MASK: true,
  TOKEN_PREFIX: 'Bearer ',
  FORM_DATA: 'application/x-www-form-urlencoded',
  JSON: 'application/json'
}

/*
 * 创建axios实例
 */
const http = axios.create({
  baseURL: staticVariables.BASE_URL,
  timeout: staticVariables.TIME_OUT
})

/**
 * 请求工具
 * @param url
 * @param method
 * @param ContentType
 * @param data
 * @param isLoading
 * @returns {Promise<unknown>}
 */
const request = (url, method, ContentType, data, isLoading = true) => {
  if (isLoading) {
    uni.showLoading({
      title: "请求中...",
      mask: staticVariables.MASK
    })
  }
  return new Promise((resolve, reject) => {
    http.request({
      url,
      method,
      data: method === 'get' ? void 0 : data,
      params: method === 'get' ? data : void 0,
      headers: {
        'Content-Type': ContentType,
        'Authorization': uni.getStorageSync('token')
      },
    }).then(res => {
      if (res.data.code === 200) {
        resolve(res.data)
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
        if (res.data.code === 422 || res.data.code === 424) {
          Vue.prototype.$store.commit('logout')
          setTimeout(() => {
            uni.reLaunch({
                url: '/pages/login/login'
              })
          }, 1000)
        }
        reject(res.data)
      }
    }).catch(err => {
      reject(err)
    }).finally(() => {
      setTimeout(() => {
        uni.hideLoading()
      }, 200)
    })
  })
}

const get = async(url, data, isLoading) => {
  return await request(url, 'get', staticVariables.JSON, data, isLoading)
}

const getForm = async(url, data, isLoading) => {
  return await request(url, 'get', staticVariables.FORM_DATA, data, isLoading)
}

const post = async(url, data, isLoading) => {
  return await request(url, 'post', staticVariables.JSON, data, isLoading)
}

const postForm = async(url, data, isLoading) => {
  return await request(url, 'post', staticVariables.FORM_DATA, qs(data), isLoading)
}

const put = async(url, data, isLoading) => {
  return await request(url, 'put', staticVariables.JSON, data, isLoading)
}

const putForm = async(url, data, isLoading) => {
  return await request(url, 'put', staticVariables.FORM_DATA, qs(data), isLoading)
}

const deleted = async(url, data, isLoading) => {
  return await request(url, 'delete', staticVariables.JSON, data, isLoading)
}

const deletedForm = async(url, data, isLoading) => {
  return await request(url, 'delete', staticVariables.FORM_DATA, qs(data), isLoading)
}

Vue.prototype.uploadFileToServe = uploadFileToServe
Vue.prototype.get = get
Vue.prototype.getForm = getForm
Vue.prototype.post = post
Vue.prototype.postForm = postForm
Vue.prototype.put = put
Vue.prototype.putForm = putForm
Vue.prototype.deleted = deleted
Vue.prototype.deletedForm = deletedForm

export default {
  uploadFileToServe, get, getForm, post, postForm, put, putForm, deleted, deletedForm
}

标签:uniapp,axios,封装,url,staticVariables,Vue,isLoading,const,data
From: https://www.cnblogs.com/snail2018/p/17849624.html

相关文章

  • 封装uniapp的request
    1uni.request()二次封装importVuefrom'vue'constbaseUrl='http://127.0.0.1:8080'//服务器地址constimageUrl=baseUrlconststaticVariables={BASE_URL:baseUrl+'/api',TIME_OUT:10000,SSL_VERIFY:false,DURATION......
  • 封装 luckysheet 组件
    一维数组和二维数组根据luckysheet.getAllSheets()获得所有的数据表数组,其中:cellData是一维数组data是二维数组代码父组件<template><divclass="app-container"v-hasPermi="['proMana:directory:detail:proHome']"><!--项目首页,projectId:......
  • uniapp app上传图片并设置超过10m进行图片压缩
    组件页面<template>   <viewclass="upload-wrapper">      <viewv-if="pictureUrl.length">         <viewclass="preview"v-for="(item,index)inpictureUrl":key='index'>        ......
  • uniapp使用第三方插件image-tools进行图片转base64
    最近做的这个项目原来是原生android开发的,然后图片上传功能是 前端获取图片->图片转成base64字符串(base64编码)->传递给服务器后端->服务器接受base64字符串数据->获取到的base64转成图片jpg(解码)->存入服务器,并写入数据库后来因为原生安卓太麻烦了,转成了uniapp进行开......
  • 如何优雅的使用微信小程序的wx.request请求(封装request.js工具类)
    首先官方的文档不是支持Promise风格的请求我们通过官方文档可以看到微信小程序发请求的一些具体参数,下面的代码展示了用wx.request()发送的一个标准请求:wx.request({     url:"https://xxx.com",     method:"POST",     data:{   ......
  • uniapp之安卓端pdf预览
    uniapp之安卓端pdf预览原理:将文件下载到本地,使用uniapi预览文件exportPDF(){ uni.downloadFile({ url:"http://192.168.1.237:9000/profile/statute/937820.pdf", success:res=>{ console.log(res) if(res.statusCode===200){ ......
  • UNIAPP返回上一页并参数 uni.$on、uni.$off、uni.$once 和 uni.$emit
    WPFPrism事件聚合器-订阅/发布事件https://www.cnblogs.com/douyuanjun/p/17788957.html结合JS理解更容易理解:https://www.cnblogs.com/douyuanjun/p/17465402.html//传参给上一页confirm:function(){ if(this.list.length>=1){ //选择观演人 uni.$emit('selectV......
  • IndexedDB设计及封装
    设计思路固定数据表键值对表用于存储数据库相关的信息库字段构成表储存非固定数据表结构非固定数据表通过库字段构成表进行创建或更新划重点数据库初始创建或更新后会先触发onupgradeneeded方法,然后再触发onsuccess方法,如果在onupgradeneeded方法中执行了表结构操作的......
  • php提前返回数据,后面代码继续执行封装函数
    /*中断并返回数据,后面程序继续执行,避免用户等待(immediate)*可用于返回值后,继续执行程序,但程序占得所以自由没有释放,一致占用,务必注意,最好给单独脚本执行*@paramstring|array$data字符串或数组,数组将被转换成json字符串*@paramintval$set_ti......
  • Axios 介绍
    Axios是什么?Axios是一个基于promise网络请求库,作用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.jshttp模块,而在客户端(浏览端)则使用XMLHttpRequests。特性从浏览器创建XMLHttpRequests从n......