vue 开发axios的封装async/await
难得的这周事情少,不要给领导看见了啊。嘿嘿这段时间计划把一个之前的PC项目avalon + gulp的框架重构为vue + element-ui。没有用vuex,我觉得这个东西目前还用不到。目前只是在做一些基本工作。其中最重要的就是网络请求部分了。今天就上班时间,记录下我的昨天封装的。和之前使用axios算是改变了。项目基本目录结构项目目录结构基本就是这样的,其实就是vue-c...
·
难得的这周事情少,不要给领导看见了啊。嘿嘿
这段时间计划把一个之前的PC项目avalon + gulp
的框架重构为vue + element-ui
。没有用vuex,我觉得这个东西目前还用不到。
目前只是在做一些基本工作。其中最重要的就是网络请求部分了。今天就上班时间,记录下我的昨天封装的。和之前使用axios
算是改变了。
项目基本目录结构
项目目录结构基本就是这样的,其实就是vue-cli
新建项目是怎样的就是怎样的。
之前的网络请求
1.main.js
文件
// 引入 网络请求模块
import axios from 'axios'
Vue.prototype.$axios = axios;
2.具体页面中使用
this.$axios.get('url',{
params: {} // 参数
})
.then((response) => {
// 网络请求成功
})
.catch((error) => {
// 网络请求失败
});
现在的做法
1.在static
目录下新建http.js
文件,写入如下代码:
// 引入 axios
import axios from 'axios'
// 测试地址
axios.defaults.baseURL = '';
// 线上地址
// axios.defaults.baseURL = '';
// request拦截器
// axios.interceptors.request.use(function (config) {
// return config;
// }, function (error) {
//
// return Promise.reject(error);
// });
var http = {
/** get 请求
* @param {接口地址} url
* @param {请求参数} params
*/
get: function(url,params){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then((response) => {
resolve( response.data );
})
.catch((error) => {
reject( error );
});
})
},
/** post 请求
* @param {接口地址} url
* @param {请求参数} params
*/
post: function(url,params){
return new Promise((resolve,reject) => {
axios.post(url,params)
.then((response) => {
resolve( response.data );
})
.catch((error) => {
reject( error );
});
})
}
}
export default http
2.main.js
文件
// 引入 网络请求模块
import http from '../static/http.js';
Vue.prototype.$http = http;
3.具体页面中使用
async textRequest(){
var data = await this.$http.get('url');
console.log(data);
}
上面就是这次的封装了,没有之前的那些.then
和.catch
分层了,就像回调那样的。现在直接一行代码搞定。
总结
4月份写了3篇,5月份0篇,6月份1篇。今年还需要努力。
这次封装的网络其请求还有一个问题就是对IE的支持,后面再解决了。
更多推荐
已为社区贡献16条内容
所有评论(0)