react项目实战学习笔记-学习46-发送请求

最新推荐文章于 2023-10-04 10:19:46 发布

前端歌谣

最新推荐文章于 2023-10-04 10:19:46 发布

阅读量126

点赞数 1

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/126375847

版权

React项目实战-hook+react17-企业案例专栏收录该内容

61 篇文章 0 订阅

订阅专栏

这篇博客主要展示了如何在Vue应用中利用axios库设置请求和响应拦截器，以处理请求头中的token和响应数据。在请求拦截器中，从localStorage获取token并添加到请求头。响应拦截器则用于处理请求错误。当提交表单时，根据是否有id决定是更新还是新增文章，并调用相应的API，成功后关闭对话框并跳转回列表页。

摘要由CSDN通过智能技术生成

请求拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  let token = localStorage.getItem('cms-token')
  if(token){
    config.headers = {
      'cms-token': token
    }
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance;

 // 处理请求数据
  const dealData = (errCode, msg) => {
    setIsModalVisible(false); // 关闭对话框
    if (errCode === 0) {
      message.success(msg)
      setTimeout(() => {
        // 跳回list页面
        navigate('/listlist')
      }, 1500)
    } else {
      message.error(msg)
    }
  }
  // 对话框点击了提交
  const handleOk = () => {
    form
      .validateFields()    // validate校验   field字段
      .then((values) => {
        //  form.resetFields();   // reset重置
        let { title, subTitle } = values;
        // 地址栏有id代表现在想要更新一篇文章
        if (params.id) {
          // 更新文章的请求
          ArticleUpdateApi({ title, subTitle, content, id: params.id }).then(res => dealData(res.errCode, res.message))
        } else {
          // 添加文章的请求
          ArticleAddApi({ title, subTitle, content }).then(res => dealData(res.errCode, res.message))
        }
      })
      .catch(() => false);
  };