这一篇，把前两天实践的“数据请求”部分总结一下。从最终的结果来看，配置非常的简单，使用非常的简单，也非常的灵活，同时也存在一个很头疼的问题，这个问题可以解决，但是解释不了（功力尚浅）。
看官方文档的时候，发现了一个数据请求的组件库，叫vue-resource（https://github.com/pagekit/vue-resource），根据说明，也做了集成，马上就要测试的时候，发现了一句话（具体地方已经忘记了），说“原来的vue-resource因为xxxxxxx，推荐使用axios”。所以呢，没等用上vue-resource，直接换成了axios。
import axios from 'axios'
'qs'
<span style="color: #008000">//
<span style="color: #008000"> axios 配置
axios.defaults.timeout = 5000<span style="color: #000000">;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000">POST传参序列化<span style="color: #008000">
//<span style="color: #008000"> axios.interceptors.request.use((config) => {<span style="color: #008000">
//<span style="color: #008000"> if (config.method === 'post') {<span style="color: #008000">
//<span style="color: #008000"> config.data = qs.stringify(config.data);<span style="color: #008000">
//<span style="color: #008000"> }<span style="color: #008000">
//<span style="color: #008000"> return config;<span style="color: #008000">
//<span style="color: #008000"> },(error) => {<span style="color: #008000">
//<span style="color: #008000"> // _.toast("错误的传参",'fail');<span style="color: #008000">
//<span style="color: #008000"> return Promise.reject(error);<span style="color: #008000">
//<span style="color: #008000"> });
<span style="color: #008000">//<span style="color: #008000">返回状态判断<span style="color: #008000">
//<span style="color: #008000"> axios.interceptors.response.use((res) => {<span style="color: #008000">
//<span style="color: #008000"> if (!res.data.success) {<span style="color: #008000">
//<span style="color: #008000"> // .toast(res.data.msg);<span style="color: #008000">
//<span style="color: #008000"> return Promise.reject(res);<span style="color: #008000">
//<span style="color: #008000"> }<span style="color: #008000">
//<span style="color: #008000"> return res;<span style="color: #008000">
//<span style="color: #008000"> },(error) => {<span style="color: #008000">
//<span style="color: #008000"> // .toast("网络异常",'fail');<span style="color: #008000">
//<span style="color: #008000"> return Promise.reject(error);<span style="color: #008000">
//<span style="color: #008000"> });
<span style="color: #000000">
export <span style="color: #0000ff">function<span style="color: #000000"> fetch(url,params) {
<span style="color: #0000ff">return <span style="color: #0000ff">new Promise((resolve,reject) =><span style="color: #000000"> {
axios.post(url,params)
.then(response =><span style="color: #000000"> {
resolve(response.data);
},err =><span style="color: #000000"> {
reject(err);
})
.<span style="color: #0000ff">catch((error) =><span style="color: #000000"> {
reject(error)
})
})
}
export <span style="color: #0000ff">default<span style="color: #000000"> {
POST(url,params) {
<span style="color: #0000ff">return fetch(url,params =<span style="color: #000000"> {});
}
}
最后说说跨域的问题吧
关于跨域访问，我的基础知识还不够，所以解释不了。解决方案写明白，至少能解决问题
修改/ProjectPath/config/index.js
module.exports =
assetsSubDirectory: 'static''/''/api''http://xx.xx.xx.xxx:xxx/api/',
changeOrigin: '^/api': '/'
host: 'localhost',
port: 8080,
...
}
计划里还有最后一个篇章，关于“状态管理”的，比如“根据登录状态进行判断，显示登录页或者菜单页面”，那就，预知后事如何，待我娓娓道来
?
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
