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这个玩意儿会有的,但很不幸,不太懂,它没有来过我的世界。
vue3+vite+ts 封装axios踩坑记录_第1张图片
多次面向百度开发无果,怒而弃之。

在大哥的指导下,我们使用了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,大概是这样:
vue3+vite+ts 封装axios踩坑记录_第2张图片
打码的是我们设置不同环境的域名。

然后我们就可以使用它了,在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");
	});

vue3+vite+ts 封装axios踩坑记录_第3张图片

到这,如果接口不需要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

撒花~ 完工

你可能感兴趣的:(typescript,node.js,vue.js)