vue_axios请求封装、异常拦截统一处理

最新推荐文章于 2023-10-18 11:03:41 发布

你要走就走

最新推荐文章于 2023-10-18 11:03:41 发布

阅读量483

点赞数

分类专栏： axios 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/weixin_48852004/article/details/120484190

版权

本文介绍了在Vue项目中如何进行axios的请求封装和异常拦截处理，旨在减少重复代码并统一处理网络请求可能出现的问题。文章详细阐述了封装axios的过程，包括在main.js中导入请求方法、将请求方法挂载到Vue.prototype上，以及实际调用请求的方法和示例。

摘要由CSDN通过智能技术生成

1、前端网络请求封装、异常统一处理

vue中采用axios处理网络请求，避免请求接口重复代码，以及各种网络情况造成的异常情况的判断，采用axios请求封装和异常拦截操作；

axios 请求封装

//  引入axios文件包
import axios from 'axios'

// POST 方法封装  (参数处理)
export const postRequest = (url, params) => {
   
  return axios({
   
    method: 'post',
    url: url,
    data: params,
    transformRequest: [function (data) {
   
      let ret = ''
      for (let it in data) {
   
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
   
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

// POST 方法封装  (文件上传)
export const uploadFileRequest = (url, params) => {
   
  return axios({
   
    method: 'post',
    url: url,
    data: params,
    headers: {
   
      'Content-Type': 'multipart/form-data'
    }
  });
}

//  GET 方法封装
export const getRequest = (url) => {
   
  return axios({
   
    method: 'get',
    url: url
  });
}

//  PUT 方法封装
export const putRequest = (url, params) => {
   
  return axios({
   
    method: 'put',
    url: