安装axios

npm i axios -D

封装axios

image.png

  1. src/api/home.js

    1. import index from './index'

  2. src/api/index.js ```javascript import {request} from ‘./request’

const index = { get(url, params) { const config = { method: ‘get’, url: url } if (params) { for (let key in params) { if (params[key].length === 0) { delete params[key] } } config.params = params } return request(config) }, getFile(url, params) { const config = { method: ‘get’, url: url, responseType: ‘blob’ } if (params) config.params = params return request(config) }, post(url, params) { const config = { method: ‘post’, url: url } if (params) config.data = params return request(config) }, put(url, params) { const config = { method: ‘put’, url: url } if (params) config.data = params return request(config) }, delete(url, params) { const config = { method: ‘delete’, url: url } if (params) config.params = params return request(config) } } export default index

  2. 3. src/api/request.js
  3. ```javascript
  4. import axios from 'axios'
  6. export function request(config) {
  7.     // 创建axios的实例
  8.     const instance = axios.create({
  9.         baseURL: import.meta.env.VITE_APP_BASE_URL,
  10.         timeout: 20000
  11.     })
  12.     // 请求拦截器配置
  13.     instance.interceptors.request.use(config => {
  14.             // config.headers.Authorization = window.sessionStorage.getItem('token')
  15.             return config
  16.         }, error => {
  17.             console.log(error)
  18.             return Promise.error(error)
  19.         }
  20.     )
  21.     // 响应拦截器配置
  22.     instance.interceptors.response.use(response => {
  23.         return response.data
  24.     }, error => {
  25.         console.log(error)
  26.         switch (error.response.status) {
  27.             case 400:
  28.                 return Promise.reject(error.response.data)
  29.             case 401:
  30.                 console.log("无权访问")
  31.                 break
  32.             case 403:
  33.                 console.log("token过期啦")
  34.         //window.location.href="/login"
  35.                 break
  36.             case 404:
  37.                 console.log("404啦")
  38.                 break
  39.             default:
  40.                 return Promise.reject(error)
  41.         }
  42.         return Promise.reject(error)
  43.     })
  44.     // 发送真正的网络请求
  45.     return instance(config);
  46. }
  48. export default request

开发生产环境变量

项目开发过程中通常会有好几个环境，比如dev.test.development等模式，往往我们也需要在不同的环境下会有些值对应会变化，最常见的就是后台的接口api,开发环境的api和生产环境的api是不一致的，所以我们需要进行配置,在vite中我们需要进行这样的配置。参考文档：https://cn.vitejs.dev/guide/env-and-mode.html#env-files

  1. package.json指定mode ```javascript { “name”: “myblog_pc”, “version”: “0.0.0”, “scripts”: { “dev”: “vite —mode development”, “build”: “vite build —mode production”, “serve”: “vite preview” }, ………… }
  2. 2. 项目根目录创建.env.development文件
  3. ```javascript
  4. ENV= 'development'
  5. VITE_APP_TITLE = '测试环境'
  6. VITE_APP_BASE_URL = 'http://127.0.0.1:8000/'

  1. 项目根目录创建.env.production文件

    1. ENV= 'production'
    2. VITE_APP_TITLE = '生产环境'
    3. VITE_APP_BASE_URL = 'https://api.cuiliangblog.cn/'

  2. src/api/request.js使用环境变量

    1. // 创建axios的实例
    2.  const instance = axios.create({
    3.      baseURL: import.meta.env.VITE_APP_BASE_URL,
    4.      timeout: 20000
    5.  })