使用async和await封装vue中的http请求

• 实际需求中经常会碰到想异步请求代码写的像同步一样简洁&＃xff0c;解决回调地狱&＃xff0c;这是最近封装的一个。

// import qs from &＃39;qs&＃39;;
import axios from &＃39;axios&＃39;
import utils from &＃39;./util&＃39;
import { Toast, Dialog } from &＃39;mand-mobile&＃39;
import store from &＃39;&＃64;/store&＃39;
import config from &＃39;../config/index&＃39;let baseUrl &＃61; config.baseUrl // 设置你的baseUrlconst CancelToken &＃61; axios.CancelToken
const source &＃61; CancelToken.source()
// 设置token
function setToken () {if (utils.local.get(&＃39;token&＃39;)) {axios.defaults.headers.common[&＃39;token&＃39;] &＃61; utils.getLocal(&＃39;token&＃39;);}
}// 请求验证拦截器
axios.interceptors.request.use(config &＃61;> {// Toast是示例代码&＃xff0c;实际需要根据自己的编写// Toast.loading(&＃39;加载中...&＃39;)return config
})
axios.interceptors.response.use(res &＃61;> {// 此段为公司的业务代码&＃xff0c;可根据自己的实际情况编写// Toast.hide()// const code &＃61; res.data.error_code// const msg &＃61; res.data.error_msg// if (code !&＃61;&＃61; &＃39;0000&＃39;) {// if (code &＃61;&＃61; &＃39;1001&＃39;) {// location.href &＃61; &＃39;/#/login&＃39;// } else {// Dialog.confirm({// title: &＃39;提示&＃39;,// content: msg,// confirmText: &＃39;确定&＃39;,// onConfirm: () &＃61;> console.log(&＃39;[Dialog.confirm] confirm clicked&＃39;),// })// }// }return res.data
})//封装请求方法
function formatReq(type, url, data) {const tempObj &＃61; new FormData()for(let i in data) {tempObj.append(i, data[i])}tempObj.append(&＃39;token&＃39;, store.state.token)setToken()return new Promise((reslove, reject) &＃61;> {axios({method: type,url: &＃96;${baseUrl}${url}&＃96;,// headers: {// //这里的请求头与后台商量设置// // &＃39;content-Type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;// &＃39;content-Type&＃39;: &＃39;application/x-www-from-urlencoded&＃39;// },cancelToken: source.token,// data: qs.stringify(data) //java后台用qs转// data:JSON.stringify(data)//PHP后台用JSON转data: tempObj//PHP后台用JSON转}).then(r &＃61;> {// store.commit(&＃39;UPDATE_LOADING&＃39;, false); //隐藏loading//这里可以添加指定对应状态码的处理方式,比如登陆过期,res.data.code &＃61;&＃61;&＃61; &＃39;6666&＃39; 路由跳转到loginreslove(r);}).catch(e &＃61;> {// store.commit(&＃39;UPDATE_LOADING&＃39;, false); //隐藏loadingreject(e.message);});});
}const Http &＃61; {get: (url, query) &＃61;> {url &＃61; utils.formatUrl(url, query)setToken();return axios.get(&＃96;${baseUrl}${url}&＃96;, { cancelToken: source.token }).then(r &＃61;> r);},post: (url, data) &＃61;> formatReq(&＃39;post&＃39;, url, data),put: (url, data) &＃61;> formatReq(&＃39;put&＃39;, url, data),patch: (url, data) &＃61;> formatReq(&＃39;patch&＃39;, url, data),delete: (url, data) &＃61;> formatReq(&＃39;delete&＃39;, url, data)
};export default Http;//处理get请求&＃xff0c;传入参数对象拼接
// let formatUrl &＃61; (url, obj) &＃61;> {
// let params &＃61; Object.values(obj).reduce((a, b, i) &＃61;> &＃96;${a}${Object.keys(obj)[i]}&＃61;${b}&&＃96;, &＃39;?&＃39;);
// return &＃96;${url}${params.substring(0, params.length - 1)}&＃96;;
// };// 使用示例
// methods: {
// async login() {
// let loginInfo &＃61; await this.http.post(&＃39;/api/login/doLogin&＃39;, this.loginInfo)
// const token &＃61; loginInfo.data.token
// // 提交mutation 保存token
// this.$store.commit(&＃39;updateToken&＃39;, token)
// this.COOKIE.set(&＃39;token&＃39;, token)
// Toast.succeed(&＃39;登录成功&＃39;)
// setTimeout(() &＃61;> {
// this.$router.push(&＃39;/&＃39;)
// }, 300)
// }
// }