当前位置: 首页 > news >正文

二次封装ajax和axios

ajax

app.config.globalProperties.$http = function(url, method, data, async, fun) {$.ajax({url: baseUrl + url, //请求地址type: method,   //请求方式dataType: 'json',  //数据类型contentType: "application/json",xhrFields: {  //跨域设置withCredentials: true},headers: {"token":localStorage.getItem("token") //请求头设置token验证},async: async,  //开启异步请求 true/falsedata: JSON.stringify(data),  //携带数据转换为字符串success: function(resp) {  //请求成功后的操作if (resp.code == 200) {fun(resp)} else {ElMessage.error({message: resp.msg,duration: 1200});}},error: function(e) {  //请求失败后的操作if (e.status == undefined) {ElMessage.error({message: "前端页面错误",duration: 1200});} else {let status = e.statusif (status == 401) {router.push({name: 'Login'})} else {ElMessage.error({message: e.responseText,duration: 1200});}}}})
}

axios

/对于axios函数库进行二次封装
//你工作的时候axios是否进行二次封装?
// 目的1:利用axios请求,响应拦截器功能
// 目的2:请求拦截器,一般看可以在请求头中携带公共参数:token
// 目的3:响应拦截器,可以简化服务返回的数据,处理http的网络错误
import axios from "axios";
import { ElMessage } from "element-plus";//利用axios.create方法创建一个axios实例:可以设置基础路径、超时时间的设置
const request = axios.create({baseURL: "/api", //请求路径设置timeout: 5000, // 超时的时间设置,超出五秒请求就是失败的
});// 请求拦截器
request.interceptors.request.use((config) => {//config:请求拦截器回调注入的对象(配置对象),配置对象的身上最重要的一件事就是headers属性//可以通过请求头携带公共参数-tokenreturn config;
});request.interceptors.response.use((response) => {//响应拦截器成功的回调,一般会进行简化数据return response.data;},(error) => {// 处理http网络错误let status = error.response.status;switch (status) {case 404://错误提示信息ElMessage({type: "error",message: "请求失败路径出现问题",});break;case 500 | 501 | 502 | 503 | 504 | 505://错误提示信息ElMessage({type: "error",message: "服务器挂了",});break;case 401:ElMessage({type: "error",message: "参数有误",});break;}return Promise.reject(new Error(error.message));}
);export default request;

http://www.lryc.cn/news/117803.html

相关文章:

  • Android进阶之SeekBar动态显示进度
  • 企业计算机服务器中了locked勒索病毒怎么办,如何预防勒索病毒攻击
  • 大麦订单截图 一键生成订单截图
  • LLaMA长度外推高性价比trick:线性插值法及相关改进源码阅读及相关记录
  • 中国信息安全测评中心CISP家族认证一览
  • 牛客网【面试必刷TOP101】~ 06 递归/回溯
  • ArcGIS Pro基础:【划分】工具实现等比例、等面积、等宽度划分图形操作
  • 括号匹配问题:栈的巧妙应用与代码优化【栈、优化、哈希表】
  • vue项目正确使用样式deep穿透
  • Jenkins持续集成-快速上手
  • 查看linux 所有运行的应用和端口命令
  • Maven安装与配置,Eclipse配置Maven【图文并茂的保姆级教程】
  • 利用XLL文件投递Qbot银行木马的钓鱼活动分析
  • 2023CNSS——WEB题解(持续更新)
  • Unity之ShaderGraph 节点介绍 数学节点
  • springboot mongo 使用
  • 如何使用appuploader制作apple证书​
  • Promise详细版
  • v-for循环生成的盒子只改变当前选中的盒子的样式
  • Spring Data JPA源码
  • 如何防止CSRF攻击
  • linuxARM裸机学习笔记(7)----RTC实时时钟实验
  • NSS [UUCTF 2022 新生赛]ez_upload
  • 【操作系统】操作系统知识点总结(秋招篇)
  • 篇十九:迭代器模式:遍历集合
  • 浅谈JVM中的即时编译器(Just-In-Time compiler, JIT)
  • Android 13 Launcher——长按图标弹窗内容修改以及小组件等隐藏起来
  • 又一个不可错过的编程大模型来了让你惊呼“码农人生”不虚此行
  • 【Express.js】集成SocketIO
  • 为树莓派Pico配置交叉编译环境和工具链arm-none-eabi-gcc时可能会遇到的错误以及解决方案