Vue3 + Ts 配置axios_vue3 ts axios

一 下载axios

 二 创建axios实例

        1 在vue src目录下创建一个名为axios的文件夹(名字无所谓，没有特定称谓) 如果怕和axios包名字干扰，那就再改个名 叫axiosInterface

        2 在axios这个目录下创建一个axiosInterface.ts 文件夹 这个文件夹要初始化一个axios实例化对象

        3 在axios目录下再创建一个request文件夹，在request文件夹中创建一个index.ts 文件去写接口

        4 当然还有的前端项目设计到mockjs部分 那就在axios目录下创建一个名为mockjs文件 去写mock相关的实例

         具体如下图

        

 三 代码实现

        上面创建了三个文件 其中

                        axiosInterface.ts 实例化axios对象

                        requestAPI里面的index.ts 编写接口

                        mockAPI里面的index.ts编写mock请求

        1 axiosinterface.ts

                对于下面的文件做一点解析

                axios实例拦截请求和响应这两块代码不是一定需要写 可以整体去除 这两部分主要是对请求和响应做拦截并操作请求和响应

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse,} from 'axios';
 
export const axiosInstance = axios.create({
    baseURL: "http://127.0.0.1:5173",
    timeout: 5000,
});
 
// axios实例拦截响应
axiosInstance.interceptors.response.use(
    (response: AxiosResponse) => {
        return response;
    },
    // 请求失败
    (error: any) => {
        return error;
    }
);
 
// axios实例拦截请求
axiosInstance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        return config;
    },
    (error:any) => {
        return Promise.reject(error);
    }
)

        2 requestAPI里面的index.ts 文件和mockAPI中的index.ts文件书写方式一样 

想了解mockjs请一部我另一篇博客

mockjs介绍http://t.csdn.cn/EcnsF

        书写方式参考axios官网 

   axios官网https://www.axios-http.cn/docs/intro

import {axiosInstance} from "../axiosInterface";
 
 
export const getLoginData = () =>{ return axiosInstance.get("/mockjs/loginData");}

 四 有关index.ts

      很多小伙伴很好好奇为什么我要创建一个requestAPI文件夹里面再创建一个index.ts文件， 那为什么不直接创一个requestAPI.js 文件呢

      首先先说明，这两种方法写出来的代码没有任何区别

      index.ts文件在导入的时候 无需导入到

                        requestAPI/index.ts

     node默认导入到 

                        requestAPI/

     node会自动读取该文件夹下面的index.js文件

 这是我上面代码中的mockAPI.ts中的默认导入方式 （alt + enter编译器给导入的写法）

    import {getLoginData} from "../../axios/mockAPI";

 当然在后面补齐也可以 但是编译器(我用的webstorm)会黄色标注 alt+enter后发现有如下提示

将ts后缀补齐甚至报错 只能以前两种方式导入