Axios的使用教程

AXIOS

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

使用npm等包管理工具下载axios

npm i axios

创建axios实例、封装get、post请求方法

ts 复制代码
import axios from "axios";
import { user } from "@/store/Store";
const requestUrl = "http://localhost:5250";
const userStore = user();
//创建实例
const axiosInstance = axios.create({
  baseURL: requestUrl,
  // timeout: 3000,
});

//请求拦截器,请求前
axiosInstance.interceptors.request.use(
  (config) => {
    if (userStore.data) {
      // console.log("请求头toekn=====>", userStore.data.token);
      // 设置请求头
      // config.headers['token'] = useToken.token;
      config.headers.Authorization = `Bearer ${userStore.data.token}`;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
//请求拦截器,请求后
axiosInstance.interceptors.response.use(
  (response) => {
    if (response.status === 200) return response.data;
  },
  (error) => {
    console.log(error);
    const status: number = error.response.status;
    switch (status) {
      case 404:
        console.error("资源不存在");
        break;
      case 401:
        console.error("没有权限");
        break;
      case 500:
      case 501:
      case 502:
        console.error("没有权限");
        break;
      case 400:
        console.error(error.response.data.msg + "参数错误");
        break;
      default:
        console.log("无法识别");
        break;
    }
    return Promise.reject(error);
  }
);

interface ActionResult<T> {
  data: T;
  msg: string;
  error: any;
  code: number;
}
//get请求
export const get = <T>(
  url: string,
  params?: Object
): Promise<ActionResult<T>> => {
  return axiosInstance.get(url, { params });
};
//post请求
export const post = <T>(
  url: string,
  data?: Object
): Promise<ActionResult<T>> => {
  return axiosInstance.post(url, data);
};
//put请求
export const put = <T>(
  url: string,
  data?: Object
): Promise<ActionResult<T>> => {
  return axiosInstance.put(url, data);
};
//delete请求
export const delete1 = <T>(
  url: string,
  params?: Object
): Promise<ActionResult<T>> => {
  return axiosInstance.delete(url, { params });
};

封装api接口调用方法

ts 复制代码
import { get, post, delete1, put } from "./request";
import { user } from "@/types/index";
export const loginApi = (data: user) => {
  return post<any>("/api/Login/login", data);
};
export const getUserInfo = (ID: string) => {
  return get<any>("/api/Index/UserInfo", { ID });
};

在页面中调用api

ts 复制代码
import { loginApi } from "@/common/api";
const emailLoginApi = async () => {
  phoneLoding.value = true;
  try {
    const res = await loginApi({
      EMAIL: emailNumber.value,
      PASSWORD: PassWard.value,
    });
    // localStorage.setItem("userInfo", JSON.stringify(res.data.token));
    // Cookies.set("token", res.data.token);
    console.log(res);
    userStore.setData(res.data);
    console.log(userStore.data);
    $router.push("/index");
    phoneLoding.value = false;
  } catch (error) {
    phoneLoding.value = false;
  }
};
相关推荐
掘金安东尼17 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~20 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务22 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛22 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑26 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭32 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿36 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js