http.ts文件
import axios, { Axios, AxiosResponse, AxiosRequestConfig } from "axios";
// 处理 类型“AxiosResponse<any, any>”上不存在属性“errorinfo”。ts(2339) 关键一步。
declare module "axios" {
interface AxiosResponse<T = any> {//参数与res的字段相对应
result: T;
statuscode: number;
reason: string
}
export function create(config?: AxiosRequestConfig): AxiosInstance;
}
// 创建axios实例
const request = axios.create({
baseURL: '',// 所有的请求地址前缀部分(没有后端请求不用写)
timeout: 10000, // 请求超时时间(毫秒)
withCredentials: true,// 异步请求携带cookie
headers: {
// 设置后端需要的传参类型
'Content-Type': 'application/json'
// 'token': x-auth-token',//一开始就要token
// 'X-Requested-With': 'XMLHttpRequest',
},
})
// request拦截器
request.interceptors.request.use(
config => {
// 如果你要去localStor获取token
// let token = localStorage.getItem("x-auth-token");
// if (token) {
// config.headers = {"x-auth-token": token}
// }
return config
},
error => {
// 对请求错误做些什么
Promise.reject(error)
}
)
// response 拦截器
request.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default request
接口文件.ts
import instance from "./http";
export const List = (data: any) =>
instance.post("路径", data);
vue文件中的使用
const getdata = () => {
state.value.metaModel.page = 1
state.value.loading = true;
metaModelList(state.value.metaModel).then((res) => {
console.log(res);
state.value.listData = res.result.result
console.log(state.value.listData)
});
}
代理vue.config.js
module.exports = {
outputDir: "dist", //build输出目录
assetsDir: "assets", //静态资源目录(js, css, img)
lintOnSave: false, //是否开启eslint
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: "8080",
https: false, //是否使用https协议
proxy: {
"/api": {
target: "", //API服务器的地址
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: {
//重写路径
"^/api": "/api",
},
},
},
},
};