小白也能轻松使用Vue 2 + Axios：详细讲解基础配置和全局拦截器的使用方法

部分数据来源：ChatGPT

方式一：

封装 axios 实例对象

在src目录下 创建 axios/axios-instance.js 文件

import axios from 'axios'
import $store from '@/store/index'
import $router from '@/router/index'
// 引入element-ui弹窗
import { Message } from 'element-ui'

export const baseURL = process.env.VUE_APP_SERVER_URL

// 创建一个自定的axios方法(比原axios多了个基地址)
// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址
const reqAxios = axios.create({
  baseURL: baseURL
})

//  请求拦截的作用-- 使用axios拦截器处理api接口调用时，部分参数重复调用问题
reqAxios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 调用接口时统一为请求头挂载 Authorization 字段
    if ($store.state.token) {
      config.headers.Authorization = $store.state.token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截 -- 解决token过期问题
reqAxios.interceptors.response.use(
  function (response) { // 成功的回调
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response
  },
  function (error) { // 失败的回调
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 无效的 token
      // 把 Vuex 中的 token 重置为空，并跳转到登录页面
       ....
      $router.push('/login')

      // 弹窗提示
      Message.error('用户身份已过期，请重新登录!')
    }
    return Promise.reject(error)
  }
)

// 导出自定义的axios方法, 供外面调用传参发请求
export default reqAxios

封装具体的接口

在src目录下 创建 api 文件夹 ，文件夹内存放不同页面的接口的模块，比如：a.js ,b.js

import reqAxios from '@/utils/axios/axios-instance.js'

/**
 * 注册接口
 * @param {*} param0 {username: 用户名, password: 密码, repassword: 确认密码}
 * @returns Promise对象
 */
export const registerAPI = ({ username, password, repassword }) => {
  return reqAxios({
    method: 'POST',
    url: '/api/reguser',

    data: {
      // 简写形式
      username,
      password,
      repassword
    }
  })
}

/**
 * 登录接口
 * @param {*} param0 {username: 用户名, password: 密码}
 * @returns Promise对象
 */
export const loginAPI = ({ username, password }) => {
  return reqAxios({
    method: 'POST',
    url: '/api/login',

    data: {
      username,
      password
    }
  })
}

/**
 * 获取-用户基本资料接口
 * @returns Promise对象
 */
export const getUserInfoAPI = () => {
  return reqAxios({
    method: 'GET',
    url: '/my/userinfo'

    // headers: {
    //   Authorization: $store.state.token
    // }
  })
}

注意：

  前端发送请求最常⽤的是get请求还有post请求，get请求只能传 params 参数，

  query参数都是拼在请求地址上的，post 可以传 body 和 query 两种形；

1.   data----->body参数（也就是请求体）
2.   params----->query参数（都是拼接在请求地址上）

组件内调用

import { loginAPI } from '@/api/index.js'


export default {

  methods: {
    async btn_login() {
      const { data: res } = await loginAPI(this.loginForm)
     }
  }
}

方式二：（详细）

下面是具体的配置方法和全局拦截器的使用方法：

基础配置

安装 axios

首先，我们需要安装 Axios 模块。打开终端并执行以下命令即可：

npm install axios --save

在 main.js 中引入

在 Vue 2 中使用的是全局对象 Vue，请在主入口文件 main.js 中添加以下代码：

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

Vue.prototype.$http = axios.create({
  baseURL: 'https://api.example.com'
})

这里使用了 Vue.prototype 扩展名去挂载了一个新属性 $http，并设置了一个全局的基本配置 baseURL：https://api.example.com。

在组件中使用

现在，在项目的任何地方都可以使用 $http 发送请求了，例如在某个组件中，只需要调用 $http.get() 或 $http.post() 方法即可发送请求到指定地址：

export default {
  methods: {
    fetchData() {
      this.$http.get('/users').then(response => { // 这里应该改成你自己的接口地址
        console.log(response.data)
      })
    }
  }
}

全局拦截器

有时候我们需要在每个请求前和请求后执行一些操作，例如显示加载动画、统一处理错误等。这时候就要用到 Axios 的拦截器了。我们可以在创建 Axios 实例的时候添加拦截器，也可以添加全局拦截器来统一处理请求或响应。

请求拦截器

Axios 允许我们在发送请求前对请求进行拦截并修改它们，例如在请求头中添加一些验证信息、显示加载动画等。使用 interceptors.request.use() 方法就可以很方便地实现。示例代码如下：

Vue.prototype.$http.interceptors.request.use(config => {
  // 显示加载动画等操作
  return config // 不要忘记返回 config
}, error => Promise.reject(error))

config 参数包含当前请求的配置信息，你可以修改这个对象来修改请求参数、请求头信息等。最后需要返回这个新的 config 对象，并用 Promise 将其返回。

响应拦截器

同样，Axios 也允许我们在接收到响应后对响应进行拦截和处理。例如过滤非法数据、判断数据是否超时等。使用 interceptors.response.use() 方法即可完成。示例代码如下：

Vue.prototype.$http.interceptors.response.use(response => {
  // 隐藏加载动画等操作
  if (response.data && response.data.code !== 0) {
    // 处理错误逻辑
  }
  return response // 注意这里也需要返回响应对象
}, error => Promise.reject(error))

response 参数表示服务器返回的数据或响应，并需要通过 Promise 返回该响应对象。

错误处理

有时候请求失败可能会导致意想不到的结果，例如页面崩溃、错误信息泄露等。为了避免这种情况，我们需要在 Axios 请求失败时进行适当的错误处理。可以使用 interceptors 拦截器中的第二个回调函数来统一处理。

Vue.prototype.$http.interceptors.response.use(response => {
  // 隐藏加载动画等操作
  if (response.data && response.data.status === 'error') {
    alert(response.data.error)
    return Promise.reject(new Error(response.data.error))
  }
  return response
}, error => {
  // 这里统一处理请求错误
  console.log(error.message)
  alert(error.message)
  return Promise.reject(error)
})

以上就是 Axios 的全局拦截器的使用方法，你可以根据具体需求进行适当的修改和扩展，来实现更加丰富的功能。没错，小白也可以轻松使用 Vue 2 + Axios 的组合！