接口文档是前后端分离,前端和后端沟通的唯一文档,一个接口文档最重要的内容是,api,请求方式,入参,出参(返回值),同一个接口需要重复使用,所以方法也写在fetch.js文件里面,示例代码如下
import axios from 'axios'
// 和后端联系的方法:
export default function fetch(api,method,data,callback){
axios({
url:'http://localhost:8000'+api,
method:method,
data:data
}).then(res=>{
console.log('成功',res)
let data=null
if (res.data.code===1){
data=res.data.data
}
callback && callback(data)
}).catch(err=>{
console.log('错误',err)
}).then(()=>{
console.log('总会执行')
})
}
//用于获取用户列表,达成接口复用的功能,直接调用getUserList然后使用就可以了(业务逻辑方法)
export function getUserList(callback){
fetch('/db/user.json','GET',{},res=>{
callback&&callback(res)
})
}
使用的时候在store文件中使用,例如:
import {
observable,
action
} from 'mobx'
import {
getUserList,
getOrderList
} from '../utils/fetch.js'
class Store {
@observable msg = 'hello 1912'
@action updateMsg() {
console.log(111111111111)
this.msg = 'hello 1912'
getUserList({}, res => {
console.log('mobx user', res)
})
getOrderList({page:this.page},res=>{
console.log('订单列表',res)
})
}
}
export default new Store()
一个小技巧:利用@进行绝对路径的配置,在webpack.config.js中找到alias:
写入:'@':path.resolve(__dirname,'../src')
```go
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
'@':path.resolve(__dirname,'../src')
},