一、安装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文件如下:
api.js文件如下
五、在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, })) };