vue3 全局配置Axios实例

目录

前言

配置Axios实例

页面使用

总结

---

前言

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求，支持请求和响应的拦截、转换、取消请求等功能。关于它的作用：

1. 发起 HTTP 请求： Axios 提供了丰富的 API，使得在浏览器和 Node.js 中发起 HTTP 请求变得非常容易。可以发送 GET、POST、PUT、DELETE 等不同类型的请求。

2. Promise 风格： Axios 使用 Promise 风格的 API，使得在异步请求中更容易处理数据和错误。可以使用 .then() 处理成功的响应，使用 .catch() 处理错误。

3. 拦截请求和响应： 可以在请求和响应被发送或接收之前进行拦截处理。这使得在请求发送前或响应返回后可以进行一些全局的处理，比如添加请求头、处理错误等。

4. 自动转换 JSON 数据： Axios 在接收到响应数据时，会自动将 JSON 字符串转换为 JavaScript 对象。这样可以方便地处理和操作服务器返回的 JSON 数据。

5. 取消请求： Axios 允许你创建一个取消请求的令牌，以便在需要时取消尚未完成的请求。这在处理组件销毁或用户导航时非常有用，可以避免不必要的请求。

6. 全局配置： 可以配置全局的默认值，例如基础URL、超时时间等，以便在整个应用程序中使用相同的设置。

7. 处理请求和响应数据： 可以在请求和响应时对数据进行转换和处理。这包括序列化请求数据、解析响应数据等。

8. 上传和下载进度： Axios 提供了上传和下载进度的事件，可以监视请求和响应的进度。这对于实时显示进度条等功能非常有用。

总体而言，Axios是一个强大而灵活的工具，可以简化和优化HTTP请求的处理，是前端开发中常用的网络请求库之一，并且当在Vue.js 3项目中使用Axios时，可以通过全局设置来配置Axios实例，以便在整个应用程序中共享相同的请求和响应逻辑，比如500或者401时，系统的一些操作。

配置Axios实例

前提，需要先安装axios：npm install axios

如下：

开始配置，先在项目的一个文件夹下某创建一个文件，里面进行Axios 实例配置，通常在src/utils下，一般内容有：

import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 使用环境变量配置 baseURL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在请求发送前可以进行一些配置，例如添加认证信息等
    config.headers['X-Auth-Token'] = 'your_token'; // 示例：添加认证信息
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 在响应返回后，可以进行一些处理，例如判断是否需要更新令牌等
    // ...
    return response;
  },
  (error) => {
    // 处理响应错误
    // ...
    return Promise.reject(error);
  }
);

export default service;

上面是比较基础的，可以在此基础上进行自定义的操作，比如我下面这种：

axios-req.ts

import axios from 'axios'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useBasicStore } from '@/store/basic'

//使用axios.create()创建一个axios请求实例
const service = axios.create()
let loadingInstance: any = null //loading实例
let tempReqUrlSave = ''
let authorTipDoor = true

const noAuthDill = () => {
  authorTipDoor = false
  ElMessageBox.confirm('请重新登录', {
    confirmButtonText: '重新登录',
    closeOnClickModal: false,
    showCancelButton: false,
    showClose: false,
    type: 'warning'
  }).then(() => {
    useBasicStore().resetStateAndToLogin()
    authorTipDoor = true
  })
}

//请求前拦截
service.interceptors.request.use(
  (req: any) => {
    const { token, axiosPromiseArr }: any = useBasicStore()
    //axiosPromiseArr收集请求地址,用于取消请求
    req.cancelToken = new axios.CancelToken((cancel) => {
      tempReqUrlSave = req.url
      axiosPromiseArr.push({
        url: req.url,
        cancel
      })
    })

    //设置token到header
    if (token) req.headers['X-Auth-Token'] = token
    //如果req.method给get 请求参数设置为 ?name=xxx
    if ('get'.includes(req.method?.toLowerCase()) && !req.params) req.params = req.data

    //req loading
    // @ts-ignore
    if (req.reqLoading ?? true) {
      loadingInstance = ElLoading.service({
        lock: true,
        fullscreen: true,
        // spinner: 'CircleCheck',
        text: '数据载入中...',
        background: 'rgba(0, 0, 0, 0.1)'
      })
    }
    return req
  },
  (err) => {
    //发送请求失败
    Promise.reject(err)
  }
)
//请求后拦截
service.interceptors.response.use(
  (res: any) => {
    //取消请求
    useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)
    if (loadingInstance) {
      loadingInstance && loadingInstance.close()
    }
    //download file
    if (res.data?.type?.includes("sheet")) {
      return res
    }
    const { code, msg } = res.data
    const successCode = [0,200,20000]
    const noAuthCode = [401,403]
    if (successCode.includes(code)) {
      return res.data
    } else {
      //authorTipDoor 防止多个请求 多次alter
      if (authorTipDoor) {
        if (noAuthCode.includes(code)) {
          noAuthDill()
        } else {
          // @ts-ignore
          if (!res.config?.isNotTipErrorMsg) {
            ElMessage.error({
              message: msg,
              duration: 2 * 1000
            })
          } else {
            return res
          }
          return Promise.reject(msg)
        }
      }
    }
  },
  //响应报错
  (err) => {
    //取消请求
    useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)
    if (loadingInstance) {
      loadingInstance && loadingInstance.close()
    }
    ElMessage.error({
      message: err,
      duration: 2 * 1000
    })
    return Promise.reject(err)
  }
)
//导出service实例给页面调用 , config->页面的配置
export default function axiosReq(config) {
  return service({
    baseURL: import.meta.env.VITE_APP_BASE_URL,
    timeout: 8000,
    ...config
  })
}

 之后我们可以在api文件夹下新建一个user.ts，放一些API。就像这样：

import axiosReq from '@/utils/axios-req'

//登录
export const loginReq = (subForm) => {
  return axiosReq({
    url: '/login',
    method: 'post',
    data: subForm
  })
}

//退出登录
export const loginOutReq = () => {
  return axiosReq({
    url: '/loginOut',
    method: 'post'
  })
}

页面使用

这里以登录页为例

登录页面发送请求，一般会发送用户账号密码，然后获取到一个token，所以我一般这样用：

import { loginReq } from '@/api/user'



const loginFunc = () => {
  loginReq({
    username: subForm.keyword,
    password: subForm.password
  })
    .then(({ data }) => {
      elMessage('登录成功')
      basicStore.setToken(data?.token)
      router.push('/')
    })
    .catch((err) => {
      tipMessage.value = err?.msg
    })
    .finally(() => {
      subLoading.value = false
    })
}

总结

如果想在Vue全局使用的话，可以用provide和inject来在整个应用程序中提供和注入Axios实例。

import { createApp } from 'vue';
import App from './App.vue';
import request from '@/utils/request';

const app = createApp(App);

// 提供Axios实例
app.provide('request', request);

app.mount('#app');

页面使用：

export default {
  inject: ['request'],
  methods: {
    fetchData() {
      this.request.get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理请求错误
        });
    },
  },
};

但是还是建议每个页面需要哪些API就引入哪些吧。

总结，aixos的全局配置会方便API管理，并且对于一些关于 token 处理和错误处理的逻辑，以及状态码的反馈都是比较方便的，根据项目需求来实现。