vue3+vite+ts 封装axios踩坑记录

注意注意注意！！踩坑记录非教程示例，别跟着我进坑里，太胖我可能捞不起来(ÒωÓױ)。

1. 安装axios：npm install axios
2. src文件夹下创建api和utils文件夹,utils里创建request.ts文件

噢，对了，刚开始request.ts文件是这么写的（有坑）：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,  // url = base url + request url
  timeout: 40 * 1000, // 默认用40s超时时间
  headers: { // 配置OAuth 2.0的认证头
    'Content-Type': 'application/json;charset=utf-8'
  },
  withCredentials: true // send cookies when cross-domain requests
})

// 请求前置拦截器
service.interceptors.request.use((config) => {
  if (config.method === 'post' && !config.data) {
    config.data = config.params
    config.params = null
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应前置拦截器
service.interceptors.response.use((res) => {
  return Promise.resolve(res)
}, (error) => {
  let errMsg = ''
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        errMsg = '错误的请求'
        break
      case 500:
        errMsg = '服务器端出错'
        break
      case 401:
        errMsg = '权限校验错误'
        break
      default:
        errMsg = '网络错误'
    }
  }
  return Promise.reject(errMsg)
})

// 发起请求
export function request(config: any) {
  return new Promise(async (resolve, reject) => {
    try {
      const result = await axios({
        ...config
      })
      resolve(result)
    } catch (err) {
      reject(err)
    }
  })
}

export default service

遇到问题:找不到名称 “process”

• 解决方法第一步:npm i --save-dev @types/node 解决方法第二步:
  在tsconfig.json文件中,types里加上"node";

     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "types": ["vite/client", "node"]   },   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }
  

然后你猜怎么着？此法于我无用。
最后重启大法拯救了我，删除node_modules，重装node_modules，反复多次莫名其妙好了。

然后运行是可以运行的，编译器没报错，但浏览器不干了，当场抛错一个错误：ReferenceError: process is not defined
process 是什么呢，其实是node的一个全局对象，提供当前 Node 进程的信息，它可以在脚本的任意位置使用，不必通过require命令加载（这还是我大哥给我的知识，此处感谢大哥）。可以node -v试一下有没有输出node版本号，一般来说，有node这个玩意儿会有的，但很不幸，不太懂，它没有来过我的世界。

多次面向百度开发无果，怒而弃之。

在大哥的指导下，我们使用了import.meta.env 替换 process.env
对了 这里得说 还得在根目录下新建.env文件，我这建立了三个，一个开发环境，一个正式环境，一个测试环境。

.env.development文件：

VITE_APP_VERSION = "1.0.0"
NODE_ENV='development'
ENV_CONFIG= 'dev'
VITE_APP_BASE_API= '域名'
JIGOU_ENV= 'dev'

.env.production文件：

VITE_APP_VERSION = "1.0.0"
NODE_ENV= 'production'
ENV_CONFIG= 'prod',
VITE_APP_BASE_API= '域名'
JIGOU_ENV= 'prod'

然后关键来了：import.meta.env 替换 process.env
在request.ts文件改成这个

let url: any = import.meta.env // 配置不同环境的域名信息等
const service = axios.create({
  baseURL: url.VITE_APP_BASE_API, // url = base url + request url
  timeout: 40 * 1000, // 默认用40s超时时间
  headers: { // 配置OAuth 2.0的认证头
    'Content-Type': 'application/json;charset=utf-8'
  },
  withCredentials: true // send cookies when cross-domain requests
})

可以打印一下url也就是我们的import.meta.env，大概是这样：

打码的是我们设置不同环境的域名。

然后我们就可以使用它了，在src的api下，创建index.ts

import request from "../utils/request"

export function mallGoodsDetailAPI(params: object) {
  return request({
    url: '接口url',
    method: 'post',
    params
  })
}

vue中使用mallGoodsDetailAPI接口时，直接调用api下的index.ts里的mallGoodsDetailAPI就可以了，如：

import { mallGoodsDetailAPI } from "../../api/index";

	mallGoodsDetailAPI({}).then((res: any) => {
	     console.log(res, "res");
	});

到这，如果接口不需要token什么的，就可以直接用了，但想要请求头带上token，还得再来新的坑，我先去干饭，吃饱再爬坑。

冰狗~ 我下次回来补坑，下次一定。（咕咕咕…）

我来填坑了，封装axios请求头token：
在我们的request.ts里加上token即可

// 请求前置拦截器
service.interceptors.request.use((config) => {

  config.headers['Authorization'] = token
  
  if (config.method === 'post' && !config.data) {
    config.data = config.params
    config.params = null
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

那么token怎么来的呢？
看一下我们项目的属性，是有login.vue需要登录的系统项目，还是无登录的h5项目呢，
如果是有登录的项目，登录时向后端拿到token就行；如果是h5没法拿到token，向客户端拿token就可以，可通过DSBridge通信拿到我们想要的token值，了解DSBridge更多可参考DSBridge

撒花~ 完工