react中使用axios + mockjs模拟后台数据

农祖社 發表於 2020-8-19 16:13:00

react中使用axios + mockjs模拟后台数据

<div>
<div>之前写了在vue中使用mockjs模拟后台接口,现在使用react,也把react中的使用写一下.基本方法和vue一样</div>
<br>
<div>我这个项目是用react脚手架搭建的,项目源码地址: https://github.com/shengbid/my-react-admin</div>

</div>
<div> </div>
<div>
<div>
<h4>1. 安装mockjs和axios</h4>
<div>yarn add axios -S</div>
<div>yarn add mockjs - D</div>
<div> </div>
<div>
<div>
<h4>2. 在项目中新建几个文件,文件位置也没有特别规定要放在哪,根据自己的习惯放就行了</h4>
<div>需要一个mock文件,配置接口数据;一个axios文件,配置axios;一般还会有一个接口管理文件,放接口名称,现在都不会直接在项目中引入axios调用</div>
<div><img src="https://img2020.cnblogs.com/blog/1349812/202008/1349812-20200819160602067-1215614869.png"></div>
<div> </div>
<div>
<h4>3. axios文件配置, 就是正常的请求拦截响应处理</h4>
<div>/src/common/request.js</div>
<div>
<div class="cnblogs_code">
<pre>import axios from 'axios'<span style="color: rgba(0, 0, 0, 1)">
import { message } from </span>'antd'<span style="color: rgba(0, 0, 0, 1)">;

const service </span>=<span style="color: rgba(0, 0, 0, 1)"> axios.create({
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> baseURL: '',</span>
timeout: 5000<span style="color: rgba(0, 0, 0, 1)">
})

service.interceptors.request.use(
config </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> config
},
error </span>=><span style="color: rgba(0, 0, 0, 1)"> {
console.log(error)
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> Promise.reject(error)
}
)

service.interceptors.response.use(
response </span>=><span style="color: rgba(0, 0, 0, 1)"> {
const res </span>=<span style="color: rgba(0, 0, 0, 1)"> response.data
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (res.code !== 200<span style="color: rgba(0, 0, 0, 1)">) {
   message.error(res.message)
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> res
}
},
error </span>=><span style="color: rgba(0, 0, 0, 1)"> {
message.error(error.message)
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> Promise.reject(error)
}
)

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> service</pre>
</div>
<p> </p>
<div>
<h4>4. mock文件配置</h4>
<div>我是按功能模块做了文件拆分,在index.js里统一设置</div>
<div>/mock/file.js</div>
<div>
<div class="cnblogs_code">
<pre>import Mock from 'mockjs'

<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> mock方法,详细的可以看官方文档</span>
const Random =<span style="color: rgba(0, 0, 0, 1)"> Mock.Random

export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> [
{
url: </span>'/upload/file'<span style="color: rgba(0, 0, 0, 1)">,
type: </span>'post'<span style="color: rgba(0, 0, 0, 1)">,
response: config </span>=><span style="color: rgba(0, 0, 0, 1)"> {

   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
   code: </span>200<span style="color: rgba(0, 0, 0, 1)">,
   data: {
      name: </span>'file'<span style="color: rgba(0, 0, 0, 1)">,
      url: Random.image(</span>'200x100', '#50B347', '#FFF', 'Mfile'<span style="color: rgba(0, 0, 0, 1)">)
   }
   }
}
},
{
url: </span>'/getList/file'<span style="color: rgba(0, 0, 0, 1)">,
type: </span>'get'<span style="color: rgba(0, 0, 0, 1)">,
response: () </span>=><span style="color: rgba(0, 0, 0, 1)"> {

   let fileList </span>=<span style="color: rgba(0, 0, 0, 1)"> []
   </span><span style="color: rgba(0, 0, 255, 1)">for</span> (let i = 0; i < 6; i++<span style="color: rgba(0, 0, 0, 1)">) {
   let file </span>=<span style="color: rgba(0, 0, 0, 1)"> {}
   file.uid </span>=<span style="color: rgba(0, 0, 0, 1)"> Random.id()
   file.name </span>= Random.title(3, 5<span style="color: rgba(0, 0, 0, 1)">)
   file.url </span>= Random.image('200x100', '#50B347', '#FFF', Random.title(1<span style="color: rgba(0, 0, 0, 1)">))
   fileList.push(file)
   }
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
   code: </span>200<span style="color: rgba(0, 0, 0, 1)">,
   data: {
      fileList
   }
   }
}
}
]</span></pre>
</div>
<div>/mock/index.js</div>
<div>
<div class="cnblogs_code">
<pre>import Mock from 'mockjs'<span style="color: rgba(0, 0, 0, 1)">

import file from </span>'./file'<span style="color: rgba(0, 0, 0, 1)">

const mocks </span>=<span style="color: rgba(0, 0, 0, 1)"> [
...file
]

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> mock请求方法放在这里统一处理,1是简便写法,2是如果请求路径需要加统一前缀或域名,可以在这里处理</span>
<span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> (const i of mocks) {
Mock.mock(i.url, i.type, i.response)
}</span></pre>
</div>
<p> </p>
<h4>5. 后台接口请求路径配置文件</h4>
<div>/src/services/upload.ts</div>
<div>
<div class="cnblogs_code">
<pre>import request from '@/commons/request'<span style="color: rgba(0, 0, 0, 1)">

export </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getFiles() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> request({
url: </span>'/getList/file'<span style="color: rgba(0, 0, 0, 1)">,
method: </span>'get'<span style="color: rgba(0, 0, 0, 1)">
})
}

export </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> uploadFile(data: any) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> request({
url: </span>'/upload/file'<span style="color: rgba(0, 0, 0, 1)">,
data,
method: </span>'post'<span style="color: rgba(0, 0, 0, 1)">
})
}</span></pre>
</div>
<p> </p>
<div>
<h4>5. 引入mock,在项目的最外层目录index.tsx里引入,直接引入就可以</h4>
<div>index.tsx</div>
<div>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import ReactDOM from </span>'react-dom'<span style="color: rgba(0, 0, 0, 1)">;
import </span>'./index.css'<span style="color: rgba(0, 0, 0, 1)">;
import App from </span>'./App'<span style="color: rgba(0, 0, 0, 1)">;
import </span>* as serviceWorker from './serviceWorker'<span style="color: rgba(0, 0, 0, 1)">;
<span style="color: rgba(255, 0, 255, 1)">import </span></span><span style="color: rgba(255, 0, 255, 1)">'../mock'</span><span style="color: rgba(0, 0, 0, 1)">

ReactDOM.render(
</span><App />,
document.getElementById('root'<span style="color: rgba(0, 0, 0, 1)">)
);</span></pre>
</div>
<p> </p>
<div>
<h4>6. 组件中使用</h4>
<div>/src/pages/upload/index.tsx</div>
<br>
<div>其实就和正常的获取后台数据一样,只是发送请求时mockjs会拦截,后期使用后台接口时,只需把index.tsx里的mock引入注释就可以了</div>
<div><img src="https://img2020.cnblogs.com/blog/1349812/202008/1349812-20200819161125542-152931962.png"></div>
<div> </div>
<div>
<h4>6. 页面打印数据</h4>
<p><img src="https://img2020.cnblogs.com/blog/1349812/202008/1349812-20200819161156910-1714997797.png"></p>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/steamed-twisted-roll/p/13529980.html

頁: [1]

琼殿技术论坛's Archiver

react中使用axios + mockjs模拟后台数据