前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react 封装 请求拦截器

react 封装 请求拦截器

作者头像
世间万物皆对象
发布2024-03-20 19:51:17
990
发布2024-03-20 19:51:17
举报
文章被收录于专栏:startstart

/**

  • 网络请求配置 */
代码语言:javascript
复制
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) {
   }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档