您的位置:首页 > 文旅 > 美景 > 开发者模式小米_江苏省二级建造师考试网_申请百度收录网址_优化seo哪家好

开发者模式小米_江苏省二级建造师考试网_申请百度收录网址_优化seo哪家好

2024/12/23 9:21:17 来源:https://blog.csdn.net/qq_41666142/article/details/144096854  浏览:    关键词:开发者模式小米_江苏省二级建造师考试网_申请百度收录网址_优化seo哪家好
开发者模式小米_江苏省二级建造师考试网_申请百度收录网址_优化seo哪家好

前端通用Axios 请求拦截配置

配置

目录在request或者plugins都可以,看自己习惯

文件名ReqAxios.js/ReqAxios.ts

import axios from "axios";
//消息提示
import { message } from "ant-design-vue";
import Vue from 'vue'const reqAxios = axios.create({baseURL: "http://localhost:8101/api",timeout: 10000,headers: {},
});// 请求拦截
reqAxios.interceptors.request.use((config) => {// let token = localStorage.getItem("token") || "";// config.headers["Authorization"] = token;return config;},(err) => {Promise.reject(err);}
);// 添加响应拦截器
reqAxios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么const data = response.data;//和后端规定的正确响应码if (data.code === 0) {return data.data;} else {//错误情况,消息提示//vue使用message.error(data.message);//ant design vue使用Vue.prototype.$message.error(message);}return data;},function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么if (error && error.response) {switch (error.response.status) {case 400:error.message = "请求错误(400)";break;case 401:error.message = "未授权,请重新登录(401)";break;case 403:error.message = "拒绝访问(403)";break;case 404:error.message = "请求出错(404)";break;case 408:error.message = "请求超时(408)";break;case 4003:error.message = "token失效,请重新登录";localStorage.removeItem("token");location.reload();break;case 500:error.message = "服务器错误(500)";break;case 501:error.message = "服务未实现(501)";break;case 502:error.message = "网络错误(502)";break;case 503:error.message = "服务不可用(503)";break;case 504:error.message = "网络超时(504)";break;case 505:error.message = "HTTP版本不受支持(505)";break;default:error.message = "连接出错" + error.response.status;}} else {error.message = "连接服务器失败!";}return Promise.reject(error);}
);
/*** 使用es6的export default导出了一个函数,导出的函数代替axios去帮我们请求数据,* 函数的参数及返回值如下:* @param {String} method  请求的方法:get、post、delete、put* @param {String} url     请求的url:* @param {Object} data    请求的参数* @returns {Promise}     返回一个promise对象,其实就相当于axios请求数据的返回值*/
export default function (method: string, url: string, data: any) {method = method.toLowerCase();if (method == "post") {return reqAxios.post(url, data);} else if (method == "get") {return reqAxios.get(url, { params: data });} else {console.error("未知的method" + method);return false;}
}

封装请求

所有请求都封装在单独的文件,便于维护

//@根目录表示src目录
import ReqAxios from "@/request/ReqAxios";/*** 分页获取列表(封装类)* @param params*/
export const listPostVOByPage = (params: any) =>ReqAxios("post", "请求地址", params);

在具体组件中使用

searchAll(searchParams.value).then((data) => {xxx}).catch((error) => {console.error(error);//vue使用message.error(error);//ant design vue使用Vue.prototype.$message.error(error);});

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com