react axios请求本地json404今天做练习react axios请求本地json出错报404发现json文件位置不对，需要放在public文件夹下注意，请求地址端口后直接加json文件名，无需加public
import
axios
from '
axios
'
在create-
react
-app创建
react
应用时，模拟本地
请求
静态
json
文件，必须把静态文件放到public下才可以
请求
到。
注意！！！！
我之前就放错地方了一直
请求
失败，后来才知道是这个路径原因！！！！
两个fetch版本都可以：
npm install --save whatwg-fetch
import 'whatwg-fetch'
----------------------
使用vue cli老版本创建的vue项目
1.在vue项目根目录下的static目录下创建
json
文件。例如：data.
json
2.在test.vue中获取本地
json
数据
import
axios
from '
axios
'
export default {
name: "index",
data() {
return {};
mounted() {
this.getData()
methods
一年没有碰
React
了，有点生疏了，于是自己手动搭建了一个Ract脚手架方便做练习，我使用的是redux进行状态管理
在actions的userInfo.
js
(功能页面，名字自己定义)中新建如下
请求
函数：
export function getUserInfo(){
return function(dispatch){
dispatch(getUserInfoRequest())
return fetch('/api/user.
json
') //关键
请求
.then((re
关注点指软件的功能或目的。把关注点“分离”，就是将与各个关注点有关的代码集中起来做成独立的模块，与其他代码分离。分离的模块要尽量减少公开的功能数量，与其他模块的关联也要维持在最低的限度。
在设计技法中，有很多模式用于实现关注点分离，其中最具代表性的模式是“模型-视图-控制器”（MVC）。在编程领域，关注点分离的代表技术是面向切面编程。
代码的修改通常以关注点为单位。因此，将代码按照关注点进行分离有一下好处。
各个关注点互相独立，从而缩小了代码的修改范围，使得代码更易于修改
const request =
axios
.create({
baseURL: '
http
://localhost:3000', // 接口的基础路径
timeout: 5000, //
请求
超时时间
headers: {
'Content-Type': 'application/
json
;charset=utf-8'
// 封装 GET
请求
export const get = (url, params) => {
return request.get(url, { params });
// 封装 POST
请求
export const post = (url, data) => {
return request.post(url, data);
// 封装 PUT
请求
export const put = (url, data) => {
return request.put(url, data);
// 封装 DELETE
请求
export const del = (url, params) => {
return request.delete(url, { params });
使用时，可以直接在组件中引入并调用封装好的
请求
方法：
```javascript
import { get } from '@/utils/request';
get('/api/user', { id: 123 }).then(res => {
console.log(res);
}).catch(err => {
console.error(err);
