vue3 + ts + cli 项目封装axios

最新推荐文章于 2024-07-03 15:32:26 发布

Chow_yi

最新推荐文章于 2024-07-03 15:32:26 发布

阅读量174

点赞数

分类专栏：自学文章标签： vue.js 前端 typescript 前端框架

本文链接：https://blog.csdn.net/Chow_yi/article/details/129747534

版权

本文介绍了如何在Vue3+TypeScript项目中利用CLI安装axios，创建.env文件来区分环境，封装axios以配置基本内容、添加拦截器和响应器，并自定义axios方法。同时，讲解了在实际应用中如何使用封装后的axios以及如何配置跨域解决请求问题。

摘要由CSDN通过智能技术生成

一、安装axios

在控制台安装axios

$ npm install axios

二、创建env文件

在项目根目录下创建env文件区分环境

.env.development

# 本地环境
NODE_ENV = 'development'
VUE_APP_BASE_API = /api
VUE_APP_FLAG = 'development'
VUE_APP_API_URL = 'http://127.0.0.1:8888'

.env.production

# 生产环境
NODE_ENV = 'production'
VUE_APP_FLAG = 'production'
VUE_APP_BASE_API = /api
outputDir = dist
# 配置生产环境地址
VUE_APP_API_URL = '地址'

.env.test

# 测试环境
NODE_ENV = 'test'
VUE_APP_FLAG = 'test'
VUE_APP_BASE_API = /api
outputDir = test
VUE_APP_API_URL = '地址'

二、封装axios

在项目根目录下创建api文件夹，在api文件夹下创建http.ts文件

在http.ts文件中配置axios的基本内容

import axios, {
    AxiosRequestConfig } from "axios"


const instance = axios.create({
   
  timeout: 1000 * 60,//超时时间
  baseURL: process.env.VUE_APP_API_URL,//接口地址，配置在.env文件中
  headers: {
   
    "Content-Type": "application/json",
  },//配置响应头
})
// 跨域设置
axios.defaults.baseURL = process.env.VUE_APP_BASE_API

在http.ts文件中添加拦截器和响应器

//HTTPrequest拦截
instance.interceptors.request.use(
  config => {
   
    // 在发送前做什么

    // 设置token
    // let storageHandler = new StorageHandler();
    // config.headers["Authorization"] = storageHandler.getSessionStorage('token');
    return config
  },
  error => {
   
    // 处理错误请求
    console.log("err" + error); // for debug
    return Promise.reject(error);
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
   
  // 对响应数据做点什么
  return response;
}, 
  error => {
   
    // console.log('error', error);
    if(error && error.response) {
   
      switch (error.response.status) {
   
        case 400:
          error.massage = '错误请求'