前端vue3的axios二次封装

安装axios

axios官网地址

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

为了直接使用 require 导入预构建的 CommonJS 模块（如果您的模块打包器无法自动解析它们），我们提供了以下预构建模块：

const axios = require('axios/dist/browser/axios.cjs'); // browser
const axios = require('axios/dist/node/axios.cjs'); // node

项目结构

src/
├── assets/
├── components/
├── views/
├── router/
│ └── index.ts
├── store/
├── services/
│ ├── api/
│ │ ├── index.ts
│ │ ├── user.ts
│ │ └── product.ts
│ └── axios.ts
├── utils/
├── App.vue
├── main.ts
└── shims-vue.d.ts

创建axios实列

（可以实例化多个）

// axios.ts 配置axios实列，基础的URL.拦截器等
// 1.引入axios
import axios from 'axios'

const process = import.meta.env
// 2.创建axios实列
const instance = axios.create({
   
   
  baseURL: 'http://localhost:3000', // 基础URL
  timeout: 5000, //  超时时间
  headers: {
   
    'Content-Type': 'application/json;charset=UTF-8' }, // 请求头
})

配置拦截器

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
   
   
    console.