[vue3] Axios 使用

 ✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                           📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                           📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

💖💖如果文章对你有所帮助请留下三连✨✨

📅标题

🎈axios中文网:axios API中文文档

🎃安装

🎈npm install axios

🎃统一封装类，新建src/http/index.ts

import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, } from "axios";
//弹窗图标和加载图标
import { ElMessage, ElLoading } from "element-plus";

//返回数据规则
interface IResponseData<T> {
  status: number;
  message?: string;
  data: T;
  code: string;
}

//默认配置,封装了一个实例对象
const config = {
  baseURL: "",
  timeout: 30 * 1000,
  withCredentials: true,
};

let loading: any = null;
//类似定义一个类
class Http {
  axiosInstance;  //定义了一个axiosInstance属性，未来它放的是一个axios实例
  constructor(config: any) {
    //实例化请求配置
    this.axiosInstance = axios.create(config);

  // 添加请求拦截器
  this.axiosInstance.interceptors.request.use(function (config) {
      //在发送请求之前做些什么
      //弄了一个加载的过度
      loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
        //覆盖整个屏幕
        fullscreen: true
      })
      return config;
    }, function (error) {
      loading.close();
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 添加响应拦截器
    this.axiosInstance.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      loading.close();
      let apiData = response.data;
      console.log(apiData)
      console.log(apiData.data)
      //将apiData的属性取出来
      const { code, message, data } = apiData;
      //取出来之后处理属性
      if (code === undefined) {
        return apiData;
      }else if (code === 0) {
        return data;
      }else {
        ElMessage.error(message)
      }
      return apiData.data;
    }, function (error) {
      // 对响应错误做点什么
      loading.close();
      return Promise.reject(error);
    });

  }

  get<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
    return this.axiosInstance.get(url, { params, ...data });
  }

  post<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
    return this.axiosInstance.post(url, params, data);
  }

  put<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
    return this.axiosInstance.put(url, params, data);
  }
}
//类似new了一个实例
export default new Http(config);

🎃FastMock模拟接口

🎈网址: FastMock

 注册账号,登录添加测试接口

 🎈进入项目,添加接口

🎃Proxy配置

🎈在vite.config.ts 文件中

proxy: {
      "/api": {
        target: "https://www.fastmock.site/mock/97c4bc10d4f77d8b92565affb090058c/",
        changeOrigin: true,
      },
    },

🎃使用axios异步请求

<template>
   <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号">
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="price" label="商品价格">
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import http from "@/http/index"
//定义tableData
const tableData:any = ref([])
onMounted(()=>{
  http.get("/api/poduct/list", {name:"moming"}).then((data) => {
    tableData.value=data
}).catch((error) => {
    console.log("error")
 })
})
</script>

💦 效果图

🎃代码优化说明

 🎈这里的加载就是效果图一

🎈加载时长设置

🎈 代码优化

🎈 在src下api/productApi.ts文件,用来存放接口

🎈productApi.ts

import http from "@/http/index"
//抽取方法
const productApi = {
    select: {
        name: "商品查询",
        url: "/api/poduct/list",
        // async 异步方法 await 等待
        call: async function (params: any) {
            return await http.get(this.url, params);
        }
    },
    insert: {

    },
    update: {

    },

}
//导出,类似于public公用
export default productApi;

🎈List.vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号">
    </el-table-column>
    <el-table-column prop="name" label="商品名称">
    </el-table-column>
    <el-table-column prop="price" label="商品价格">
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
//导入productApi
import productApi from '@/api/productApi'
//定义tableData
const tableData: any = ref([])
onMounted(() => {
  callApi();
})
const callApi = () => {
  //因为在http/index.ts中对响应的数据已经处理过了,所以直接写data见名知意
  productApi.select.call({}).then((data) => {
    //给tableData赋值
    tableData.value = data
  })
}
</script>

 💦报错效果图

🎈模拟异常报错

🎈​​​​​​​图中的消息提示框就是上面说明中的ElMessage.error(message),使用的是Element中的Feedback反馈组件中的Message消息提示