vue-axios封装请求

本文介绍了一种在Vue项目中使用Axios进行HTTP请求的方法,通过封装将请求配置统一管理,实现请求拦截、错误处理等功能,并展示了如何处理登录状态验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// request.js
import axios from 'axios'
import router from '../router'
import store from '../store'
import { Toast } from 'vant'

// 允许携带cookie
axios.defaults.withCredentials = true

var _fn

// 域名
let origin = window.location.origin + '/api/'

_fn = {
  wrapAxiosData: function (param = {}, raw = false) {
    let axiosData = {}
    // 请求头
    axiosData['headers'] = {
      token: store.state.member.token, // 用户登录的loginToken
      ...(param.headers || {})
    }
    // 请求参数
    axiosData['data'] = {
      ...(param.data || {}),
      apiVersion: param.data && param.data.apiVersion ? param.data.apiVersion : '1.0.0',
      shareId: store.state.member.shareId // 分享人id
    }
    // 请求路径
    axiosData['url'] = raw ? param.url : origin + param.url // 拼接请求路径

    // 请求类型
    axiosData['method'] = param.method || 'POST'

    return axiosData
  }
}

/**
 * 请求接口
 * @param {Object} requestParam  请求参数(包括请求类型等)
 * @param {Boolean} raw 是否自定义链接, true: 传入的完整的链接,false:项目拼接的链接
 */
function AjaxRequest (requestParam, raw = false) {
  // 接口不存在
  if (!requestParam.url) {
    return
  }
  var axiosData = _fn.wrapAxiosData(requestParam, raw) // 封装参数
  return new Promise((resolve, reject) => {
    axios(axiosData).then(res => {
      if (res.data.code === 10000) {
        resolve(res.data)
      } else if (res.data.code === 1999 || res.data.code === 1998) {
        let appFlag = store.state.member.appFlag
        Toast({
          message: '请先登录',
          duration: 2000,
          onClose: () => {
            // 没有登录,跳转去登录
            if (appFlag === 'Android') {
              window.android.appLogin() // 跳转安卓登录
            } else if (appFlag === 'IOS') {
              window.webkit.messageHandlers.appLogin.postMessage({}) // 跳转ios登录
            } else {
              router.push({ name: 'Login', query: { clear: 1 } }) // token过期,需要删除
            }
          }
        })
      } else {
        reject(res.data)
      }
    })
  })
}

export default AjaxRequest

// main.js
import request from './util/request'
Vue.prototype.$request = request
// vue 调用请求
this.$request(
        {
          url: 'Login',
          data: { phone: username, password }
        }
      ).then(res => {
        Toast('登录成功')
      }).catch(err => {
        Toast('登录失败')
      })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值