npm i acat-req
npm i axios //因为本插件是使用axios发送请求的所以也得下载它
请求层 requests.js 所有请求的配置都在这里
import acatReq from 'acat-req'
const reqOpts = [
{
url: 'apple',
name: 'apple',
}
];
const baseOpt = {
baseURL: 'http://127.0.0.1',
}
let acat = acatReq(reqOpts, baseOpt);
export default acat;
视图层 以react为例 单个请求发送实例
import acat form 'requests.js'
export default function Ele(){
let [apple,setApple] = useState();
let getApple = ()=>{
acat.apple().then(()=>{
acat.getData('apple',setApple);
})
}
return (
<div onClick={getApple}>{apple}</div>
)
}
在点击该组件div时就会发送请求并且将响应数据挂在state上
该方法需要传入两个参数,第一个是请求配置列表,第二个基础默认配置比如默认基础路径、请求头等等。
发送请求是基于axios,所以这些配置也是要和axios保持一致。
//引入方法
import acatReq from 'acat-req'
//编辑接口配置列表
const reqOpts = [
{
url: 'apple',
name: 'apple',
},
{
url: 'banana',
name: 'banana',
},
{
url: 'cat',
name: 'cat',
},
];
//默认配置
const baseOpt = {
baseURL: 'http://127.0.0.1',
}
export default acatReq(reqOpts, baseOpt);
// acat 便是 acatReq返回的对象
import acat from 'requets.js'
acat.apple()
acat.apple({
data:{},
parmas:{},
})
acat.apple().then(
()=>{
acat.getData('apple') // resData
}
)
let [apple,setApple] = useState();
acat.apple().then(
()=>{
acat.getData('apple',setApple);
}
)
//这样在请求发送成功之后便会将请求数据挂载在state上了
//vue就更简单了,直接传个赋值函数进去就可以了 🤤
acat.sendReqs('apple','banana');
这样就同步发送了两个请求
acat.sendRes('apple','banana').then(
resArr =>{
console.log(resArr);
//具体resArr长什么样,你打印了就知道了
}
).catch(
arr =>{
console.log(arr);
}
)