1. axios 请求安装:npm i axios
axios 二次封装:配置,拦截器等应用 在:utils文件夹下request.js中配置
//utils文件夹下request.js中配置
//导入 axios
import axios from "axios";
//实例化axios
var service = axios.create({
timeout: 10*1000, //超时时间
baseURL:'' //基准路径,可以省略重复前缀
})
//设置请求拦截器
service.interceptors.request.use(
(config)=>{
//添加请求头参数
config.headers['token'] = '';
return config;
},
(error)=>{
return Promise.reject(error)
}
)
//设置响应拦截器
service.interceptors.response.use(
(res)=>{
return res;
},
(error)=>{
if( error.response.status == 401 ){
alert('登陆过期,重新登录!');
}else if( error.response.status == 404 ){
alert('访问路径有误!');
}else if( error.response.status == 500 ){
alert('服务器内部错误!');
}else if( error.response.status == 503 ){
alert('服务器不可用!');
}
return Promise.reject(error)
}
)
export default service;
有请求头,记得携带token
2. 反向代理(了解)配置代理:setupProxy.js中配置
我们通过 ajax 请求数据的时候存在同源策略问题,因为协议、域名、端口中有不同,就会导致产生跨域问题,而反向代理是我们开发中用的很多的一种解决跨域问题的方式
有统一前缀:
// setupProxy.js文件中配置
const { createProxyMiddleware: proxy } = require("http-proxy-middleware");
module.exports = (app) => {
app.use(
"/api", //相同的前缀
proxy({
// 此处的端口号要与后期数据请求的数据端一致
target: "http://180.76.99.14",
changeOrigin: true,
})
);
};
没有统一前缀: 所以要要求后端每个接口加相同前缀啊,省事
升级:虚拟前缀 路径重写 解决后端给的接口没有前缀统一:简单正则
普通环境下:[^/api] : ' '
开发环境下:
// pathRewrite: { //路径重写
// ['^' + process.env.REACT_APP_BASE_API]: '',
// },
3.配置下请求管理器:api文件夹下 index.js中配置
请求管理器现在就可以发请求了。再做个请求管理器,更加好管理请求,分而治之。
//api文件夹下 index.js中配置
//导入经过二次封装的axios实例
import service from '../utils/request'
//一个接口封装成一个函数
export function banner_list( payload = {} ){
return service.get('/api/banner/list', { params: payload } );
}
export function user_login( payload = {} ){
return service.post('/api/user/login', payload );
}
//...
4.发送请求:在组件完成挂载 componentDidMount() 钩子函数中发送请求:
再升级:许多独立的批量导出
import * as admin from './admin'
import * as home from './home'
import * as xss from './xss' //xss 的独享路由 service.xss 请求
export default {
admin,
home,
xss,
}
环境配置(已经完成的项目):::开发环境下,生产环境下,测试环境下,配置完成
无须改源代码
4.开发环境下:.env.development 使环境变量的配置文件。无须引入,自动读取:可以不用写前缀:eg:/api
配置:默认隐藏文件,安全性更高(开发者看)
二次封装改 request
代理改
4.生产环境下:.env.production 代理会不起作用,所以:打包前配置。 其他不要动
静态资源打包之前改变绝对路径
这所有的 前缀 eg:/api 可以删除了 npm run build 打包:::
4.测试环境下:.env.test
配置@路径别名,让脚手架工具能识别@:
安装到开发环境:
npm i -D @craco/craco
//1.安装包 :安装到开发环境
npm i -D @craco/craco
//2.在项目根目录下,创建配置文件:craco.config.js。
//在配置文件中就可以做自定义的修改了。
//craco.config.js 中配置路径别名
const path = require('path')
module.exports = {
webpack: {
alias: {
'@': path.join(__dirname, 'src')
}
}
}
//3.修改 package.json 中的脚本命令
//package.json 中:将 start/build/test 三个命令修改为 craco 方式
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
//4.配置tsconfig.json中配置可以解决TS识别不了 @/ 路径爆红
// 在 compilerOptions 内添加如下配置
"baseUrl": ".",
"paths": {
// 注意哦,是 "@/*" 后面的 "/*" 不能少
"@/*": [
"src/*"
]
},
//5. 重启项目,让配置生效
//6. 在代码中,就可以通过 @ 来表示 src 目录的绝对路径