react 封装 请求拦截器

简介: react 封装 请求拦截器

/**

  • 网络请求配置
    */


import axios from "axios";
axios.defaults.timeout = 50000;
axios.defaults.baseURL = "http://localhost:3000";
/**
* http request 拦截器
**/
axios.interceptors.request.use(
   (config) => {
       config.data = JSON.stringify(config.data);
       config.headers = {
           "Content-Type": "application/json",
       };
       return config;
   },
   (error) => {
       return Promise.reject(error);
   }
);
/**
* http response 拦截器
*/
axios.interceptors.response.use(
   (response) => {
       if (response.data.errCode === 2) {
           console.log("过期");
       }
       return response;
   },
   (error) => {
       console.log("请求出错:", error);
   }
);
/**
* 封装get方法
* @param url  请求url
* @param params  请求参数
* @returns {Promise}
*/
export function get(url, params = {}) {
   return new Promise((resolve, reject) => {
       axios.get(url, {
           params: params,
       }).then((response) => {
           landing(url, params, response.data);
           resolve(response.data);
       })
           .catch((error) => {
               reject(error);
           });
   });
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data) {
   return new Promise((resolve, reject) => {
       axios.post(url, data).then(
           (response) => {
               //关闭进度条
               resolve(response.data);
           },
           (err) => {
               reject(err);
           }
       );
   });
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}) {
   return new Promise((resolve, reject) => {
       axios.patch(url, data).then(
           (response) => {
               resolve(response.data);
           },
           (err) => {
               msag(err);
               reject(err);
           }
       );
   });
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
   return new Promise((resolve, reject) => {
       axios.put(url, data).then(
           (response) => {
               resolve(response.data);
           },
           (err) => {
               msag(err);
               reject(err);
           }
       );
   });
}
//统一接口处理,返回数据
export default function (fecth, url, param) {
   let _data = "";
   return new Promise((resolve, reject) => {
       switch (fecth) {
           case "get":
               console.log("begin a get request,and url:", url);
               get(url, param)
                   .then(function (response) {
                       resolve(response);
                   })
                   .catch(function (error) {
                       console.log("get request GET failed.", error);
                       reject(error);
                   });
               break;
           case "post":
               post(url, param)
                   .then(function (response) {
                       resolve(response);
                   })
                   .catch(function (error) {
                       console.log("get request POST failed.", error);
                       reject(error);
                   });
               break;
           default:
               break;
       }
   });
}
//失败提示
function msag(err) {
   if (err && err.response) {
       switch (err.response.status) {
           case 400:
               alert(err.response.data.error.details);
               break;
           case 401:
               alert("未授权,请登录");
               break;
           case 403:
               alert("拒绝访问");
               break;
           case 404:
               alert("请求地址出错");
               break;
           case 408:
               alert("请求超时");
               break;
           case 500:
               alert("服务器内部错误");
               break;
           case 501:
               alert("服务未实现");
               break;
           case 502:
               alert("网关错误");
               break;
           case 503:
               alert("服务不可用");
               break;
           case 504:
               alert("网关超时");
               break;
           case 505:
               alert("HTTP版本不受支持");
               break;
           default:
       }
   }
}
/**
* 查看返回的数据
* @param url
* @param params
* @param data
*/
function landing(url, params, data) {
   if (data.code === -1) {
   }
}
相关文章
|
2月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
68 2
react对antd中Select组件二次封装
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
51 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
2月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
55 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
25天前
|
前端开发
react 封装防抖
react 封装防抖
31 4
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
43 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
28 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
16 2
|
2月前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
58 2
|
5月前
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
80 0
|
2月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
55 0