vue中Axios请求

本文探讨了在Vue框架中如何利用Axios进行HTTP请求,并介绍如何通过URL过滤重复请求,实现请求的统一管理。

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

Axios
通过请求的url过滤一定时间内重复请求

var reqList = [];
//timeInterval  是配置的时间校验时间长度
var timeInterval = 4 * 1000;
function checkRepeat(option) {
  try {
    var reqObj;
    if (typeof option === 'string') {
      reqObj = {
        url: option,
        timeStamp: new Date().getTime()
      };
    } else {
      reqObj = {
        url: option.url,
        data: option.data,
        timeStamp: new Date().getTime()
      };
    }
    var reqExistResult = false, reqExistFlag = false;
    if (reqObj) {
      for (var x = reqList.length - 1; x >= 0; x--) {
        if (reqList[x].timeStamp < new Date().getTime() - timeInterval) {
          reqList.splice(x, 1);
          continue;
        }
        if (reqObj.url === reqList[x].url && JSON.stringify(reqObj.data) === JSON.stringify(reqList[x].data)) {
          var realURL;
          try {
            realURL = reqObj.url.split('?')[0];
          } catch (e) {
            realURL = reqObj.url;
          }
          
          reqExistResult = true;
          reqExistFlag = true;
        }
      }
      if (!reqExistFlag) {
        reqList.push(reqObj);
      }
    }
    return reqExistResult;
  } catch (e) {
    return false;
  }
}

Vue框架中axios请求统一

'use strict'

import axios from 'axios'
const baseUrl = 'http://safecenter.com/api'

axios.interceptors.request.use(config => {
  // 设置token
  let token = sessionStorage.getItem('token')
  if (token) {
    config.headers.common['token'] = token
  } else{
	// token不存在跳转至登录界面,重新获取token。可以进行toast提示。
	$route.push('/login');
}
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

// TODO  处理http请求异常
function checkStatus (response) {
  // loading
  // 如果http状态码正常,则直接返回数据
  if (response && (response.status === 200 || response.status === 304 || response.status === 400 || response.status === 403)) {
    return response
    // 如果不需要除了data之外的数据,可以直接 return response.data
  }
  // 异常状态下,把错误信息返回去
  return {
    status: -404,
    msg: '网络或服务异常'
  }
}

// TODO 处理服务器返回的异常
function checkCode (res) {
  // 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误)
  if (res.status === -404) {
    alert(res.msg)
  } else if (res.status === 403) { // token失效或token不正确
    // 无权限返回登录页
	$route.push('/login')
  }
  // 处理服务端返回的异常
  if (res.data && (!res.data.success)) {
    alert(res.data.errorMsg)
  }
  return res
}

export default {
  post (url, data) {
    return axios({
      method: 'post',
      baseURL: baseUrl,
      url,
      data: JSON.stringify(data),
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		//  'Content-Type': 'application/json; charset=UTF-8'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  },
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: 'https://cnodejs.org/api/v1',
      url,
      params, // get 请求时带的参数
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值