在vue中封装axios，可在headers里面带token

最新推荐文章于 2024-08-25 03:34:32 发布

前端李小白

最新推荐文章于 2024-08-25 03:34:32 发布

阅读量5.5k

点赞数 7

分类专栏： vue axios 文章标签： axios vue

本文链接：https://blog.csdn.net/qq_42268364/article/details/97402499

版权

本文介绍了如何在Vue项目中封装axios，以便在headers中携带token进行请求。首先讲解了axios的基本概念和Promise的用途，然后展示了两种封装方式：基础封装和在headers中添加token的封装，后者利用localStorage存储和传递token，简化接口调用过程。最后提供了接口调用的组织和使用方法。

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

axios

首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。

axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

特点：支持浏览器和node.js

        支持promise

        能拦截请求和响应

        能转换请求和响应数据

        能取消请求

        自动转换JSON数据

         浏览器支持防止CSRF（跨站请求伪造）

这里你一定会想promise是什么东西，以下是promise的个人理解：

promise是什么：是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。

promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。

promise的本质是什么：分离异步数据获取和业务

在这里插入图片描述

现在封装一个axios.js文件，这个axios在headers里面是没有传递数据的，是一个相对而言比较简单的封装。
在这个axios.js中，我引入了element ui 的部分组件，目的是为了接口连接不上时，弹窗弹出相对应的信息。
代码如下：

/* eslint-disable no-undef */

import axios from 'axios'
import {
    Message } from 'element-ui'

/*  统一请求路径前缀,在npm run dev的时候,
    这个前缀要与vue.config.js里面的devServer的proxy相对应
*/

//  const base = '/ccma-server/api'   // 服务器地址
//  const base = '/api'    //本地

// 超时设定
axios.defaults.timeout = 15000

/* 添加请求拦截器 */
axios.interceptors.request.use(config => {
   
  /* 发送请求之前做些什么 */
  // console.log(config)
  return config
}, err => {
   
  Message.error('请求超时')
  return Promise.reject(err) //.catch的时候可以捕捉到错误
})

/* 添加响应拦截器 */
axios.interceptors.response.use(response => {
   
  /* 对数据做些什么 */
  const data = response.data

  // 根据返回的code值来做不同的处理(和后端约定)
  switch (data.code) {
   
    case 401:
      break
    case 404:
      // 没有权限
      if (data.msg !== null) {
   
        Message.error(data.msg)
      } else {
   
        Message.error('未知错误')
      }
      break
    case 403:
      // 没有权限
      if (data.msg !== null) {
   
        Message.error(data.msg)
      } else {
   
        Message.error('未知错误')
      }
      break
    case 500:
      // 错误
      if (data.msg !== null) {
   
        Message.error(data.msg)
      } else {
   
        Message.error('未知错误')
      }
      break
    default:
      return data
  }

  return data
}, (err) => {
   
  /* 对响应错误做些什么 */
  // 返回状态码不为200时候的错误处理
  Message.error(err.toString())
  return Promise.reject(err)  //.catch的时候可以捕捉到错误
})

export const getRequest = (url, params) => {
   
  return axios({
   
    method: 'get'