本文已参与「新人创作礼」活动，一起开启掘金创作之路

本文介绍如何使用vite集成axios访问分布式后端

先下载axios和qs

直接在package.json中添加dependencies的配置项如下

 "dependencies": {
    "axios": "^0.21.4",
    "echarts": "^5.2.2",
    "element-plus": "^1.3.0-beta.3",
    "qs": "^6.10.2",
    "vue": "^3.2.25",
    "vue-router": "^4.0.12"
  }

然后执行yarn命令下载即可

编写一个统一的request.ts入口

在src下新建utils文件夹，然后在文件夹下新建request.ts文件作为统一的入口，代码如下

import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
// create an axios instance
const service = axios.create({
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  (config) => {
    if (localStorage.getItem('token')) {
      config.headers['admin-front'] = 'Bearer' + ' ' + localStorage.getItem('token')
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code !== 200 && res.code !== 0) {
      if (res.code === 401) {
        // 重新登录
        ElMessage({
          message: '身份认证已失效，请重新登录',
          type: 'error',
          duration: 3 * 1000
        })
        router.push('/login')
      } else if (res.access_token && res.refresh_token) {
        return Promise.resolve(res)
      } else {
        ElMessage({
          message: res.msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
      }
      return Promise.resolve(res)
    } else {
      return Promise.resolve(res)
    }
  },
  (error) => {
    if (error.response) {
      if (error.response.status == 404) {
        ElMessage({
          message: `Status:404，正在请求不存在的服务器记录!`,
          type: 'error',
          duration: 5 * 1000
        })
      } else if (error.response.status == 500) {
        ElMessage({
          message: error.response.data.msg
            ? error.response.data.msg
            : `Status:500，服务器发生错误!`,
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        ElMessage({
          message: `Status:${error.response.status}，未知错误!`,
          type: 'error',
          duration: 5 * 1000
        })
      }
    } else {
      ElMessage({
        message: '请求服务器无响应!',
        type: 'error',
        duration: 5 * 1000
      })
    }
    return Promise.resolve({ res: error.response.data })
  }
)
// 2、封装请求方式
// @param url 接口地址
// @param data 携带参数
// @param file 上传文件对象
// @param auth 是否携带token
// get请求
export function get(url, data) {
  return service.get<any>(url, data)
}
// post请求
export function post(url, data, params) {
  return service.post<any>(url, data ? data : null, { params: params })
}
// put请求
export function put(url, data, params) {
  return service.put<any>(url, data ? data : null, { params: params })
}
// delete 请求
export function del(url, data) {
  return service.delete(url, data)
}

这里说明一下

• timeout的超时时间为毫秒。
• 如果想设置请求头里的参数，例如token的话，写在request的config中
• 这里我设置token是在stone中读取到才设置，假设后端某个接口需要token而我这里token没有设置的话。可以让后端提示401然后我们重新跳转到login重新登录就行了

访问分布式后端

这里其实和webpackage的设置方法相似，简单的概括一下就是：在请求时以什么开头就访问什么环境，先放一下代码如下

import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { loadEnv } from 'vite'
import path from 'path'
// https://vitejs.dev/config/
export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    server: {
      port: 3000,
      proxy: {
        // 如果是 /api 打头，则访问地址如下
        '/api': {
          target: env.VITE_BASE_REQ_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
        '/mock': {
          target: 'www.baidu.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/mock/, '')
        }
      }
    },
    plugins: [
      vue(),
      AutoImport({ resolvers: [ElementPlusResolver()] }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

这里以/mock开头的请求会直接访问百度，以/api开头的的会访问我们设置的base_req_api

创建统一维护api的路径

在src下新建api文件，下边存放我们访问api的入口，建议安装大的功能模块分类。例如：用户管理的添加、修改、删除可以统一放在user.ts
我这里以登录为例，新建一个login.ts，首先引入所有的请求类型，然后定义访问api的方法，最后export出去，简单的写法如下

关于一些以前文章的修正

• 在引入echart中忘记写需要install echarts依赖了，这里可以看本篇文章的第一步中的运行依赖的echarts版本，然后yarn一下进行下载
• 关于设置App.vue宽度的问题，我今天访问首页才发现输入框变为百分百了，这里其实只需要设置margin为0即可

结语

欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下期预告:暂未想好，后续有计划出基于Vite+TS的鉴权管理、低代码平台和在线设计表单（使用第三方插件）的实现