React如何封装请求和解决跨域

简介: React如何封装请求和解决跨域

一、安装axios


yarn add axios -D or npm i axios -D


二、在src目录下新建request文件,新建apiUrl.js


//对外提供的服务地址
export const publicIp = process.env.NODE_ENV === "development" ? "http://127.0.0.1:3001" : "";
//对外提供获取图片的地址
export const logoImgIp = process.env.NODE_ENV === "development" ? "" : "";
// 登录路由
export const LOGIN = "";


三、新建index.js请求封装


import axios from "axios";
import { publicIp } from "./apiIp";
import { message } from "antd";
let hide = null;
const instance = axios.create({
  //创建axios实例,在这里可以设置请求的默认配置
  timeout: 10000, // 设置超时时间10s
  baseURL: publicIp, //根据自己配置的反向代理去设置不同环境的baeUrl
});
// 文档中的统一设置post请求头。下面会说到post请求的几种'Content-Type'
instance.defaults.headers.post["Content-Type"] = "application/json";
let httpCode = {
  //这里我简单列出一些常见的http状态码信息,可以自己去调整配置
  400: "请求参数错误",
  401: "权限不足, 请重新登录",
  403: "服务器拒绝本次访问",
  404: "请求资源未找到",
  500: "内部服务器错误",
  501: "服务器不支持该请求中使用的方法",
  502: "网关错误",
  504: "网关超时",
};
/** 添加请求拦截器 **/
instance.interceptors.request.use(
  (config) => {
    config.headers["token"] = sessionStorage.getItem("token") || "";
    hide = message.loading({ content: "Loading...", duration: 0 });
    // 在这里:可以根据业务需求可以在发送请求之前做些什么:例如我这个是导出文件的接口,因为返回的是二进制流,所以需要设置请求响应类型为blob,就可以在此处设置。
    if (config.url.includes("pur/contract/export")) {
      config.headers["responseType"] = "blob";
    }
    // 我这里是文件上传,发送的是二进制流,所以需要设置请求头的'Content-Type'
    if (config.url.includes("pur/contract/upload")) {
      config.headers["Content-Type"] = "multipart/form-data";
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
/** 添加响应拦截器  **/
instance.interceptors.response.use(
  (res) => {
    console.log(res)
    hide();
    if (res.data.code == "200") {
      // 响应结果里的statusText: ok是我与后台的约定,大家可以根据实际情况去做对应的判断
      return Promise.resolve(res.data);
    } else {
      message.error(res.data.message);
      return Promise.reject(res.data.message);
    }
  },
  (error) => {
    hide();
    if (error.response) {
      // 根据请求失败的http状态码去给用户相应的提示
      let tips =
        error.response.status in httpCode
          ? httpCode[error.response.status]
          : error.response.data.message;
      message.error(tips);
      if (error.response.status === 401) {
        // token或者登陆失效情况下跳转到登录页面,根据实际情况,在这里可以根据不同的响应错误结果,做对应的事。这里我以401判断为例
        //针对框架跳转到登陆页面
        this.props.history.push("/admin/page");
      }
      return Promise.reject(error);
    } else {
      message.error("请求超时, 请刷新重试");
      return Promise.reject("请求超时, 请刷新重试");
    }
  }
);
/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "get",
      url,
      params,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};
/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "post",
      url,
      data,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};
/* 统一封装del请求  */
export const del = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "delete",
      url,
      data,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};
/* 统一封装update请求  */
export const patch = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "patch",
      url,
      data,
      ...config,
    })
      .then((response) => {
        resolve(response);
      })
      .catch((error) => {
        reject(error);
      });
  });
};


四、在src目录下创建api接口文件


login.js文件如下:


image.png


api.js文件如下


image.png


五、在react的index.js的入口文件下挂载封装的请求和接口


import React, { Component } from "react";
import ReactDOM from 'react-dom';
import './index.less';
import './assets/root.css';
import App from './App';
import { get, post, del, patch } from "./api/request";
import { apiUrl } from "./api/apiUrl";
import * as serviceWorker from './serviceWorker';
Component.prototype.get = get;
Component.prototype.post = post;
Component.prototype.del = del;
Component.prototype.patch = patch;
Component.prototype.api = apiUrl;
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();


六、如何使用


let prams = {
     username:''
 }
 this.post(`${this.api.login.login}`, prams).then( res => {
    console.log(res)
 })
 --- `this.get`是使用方法,
 ---`${this.api.login.login`是调用的接口,
 ---`prams`是请求参数


七、如何解决跨域


1.在package.json文件中配置proxy信息


React 2.0及以下的版本:


"proxy": "http://服务器地址"  // 配置你要请求的服务器地址


新版本支持配置多个代理


"proxy": {
    "/path1": {
      "target": "http://服务器地址01",
      "changeOrigin": true
    },
    "/path2": {
      "target": "http://服务器地址02",
      "changeOrigin": true
    }
  }


2、使用第三方依赖包(“http-proxy-middleware”)


npm install http-proxy-middleware


在src目录下创建setupProxy.js文件 其内容为:


const proxy = require("http-proxy-middleware");
module.exports = function (app) {
    app.use(proxy("/data", {
        target: "http://服务器地址1", //配置你要请求的服务器地址
        pathRewrite: {'^/data': ''},
        changeOrigin: true,
    }))
    app.use(proxy("/rest", {
        target: "http://服务器地址2",
        pathRewrite: {'^/data': ''},
        changeOrigin: true,
    }))
};


相关文章
|
2月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
82 2
react对antd中Select组件二次封装
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
52 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
2月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
65 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
1月前
|
前端开发
react 封装防抖
react 封装防抖
32 4
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
52 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
31 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
24 2
|
2月前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
70 2
|
5月前
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
86 0
|
2月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
58 0