[vue3] Axios 使用

✨✨博主简介:一个会bbox的‍

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

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

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

标题

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 {
  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(url: string, params?: object, data = {}): Promise> {
    return this.axiosInstance.get(url, { params, ...data });
  }

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

  put(url: string, params?: object, data = {}): Promise> {
    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异步请求

效果图

代码优化说明

 这里的加载就是效果图一

加载时长设置

 代码优化

 在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

 报错效果图

模拟异常报错

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