AXIOS
Axios 是一个基于 promise 网络请求库,作用于
node.js
和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp
模块, 而在客户端 (浏览端) 则使用 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;
}
};