使用async和await封裝vue中的http請求
阿新 • • 發佈:2019-03-26
- 實際需求中經常會碰到想非同步請求程式碼寫的像同步一樣簡潔,解決回撥地獄,這是最近封裝的一個。
// import qs from 'qs';
import axios from 'axios'
import utils from './util'
import { Toast, Dialog } from 'mand-mobile'
import store from '@/store'
import config from '../config/index'
let baseUrl = config.baseUrl // 設定你的baseUrl
const CancelToken = axios.CancelToken
const source = CancelToken.source()
// 設定token
function setToken () {
if (utils.local.get('token')) {
axios.defaults.headers.common['token'] = utils.getLocal('token');
}
}
// 請求驗證攔截器
axios.interceptors.request.use(config => {
// Toast是示例程式碼,實際需要根據自己的編寫
// Toast.loading('載入中...')
return config
})
axios.interceptors.response.use(res => {
// 此段為公司的業務程式碼,可根據自己的實際情況編寫
// Toast.hide()
// const code = res.data.error_code
// const msg = res.data.error_msg
// if (code !== '0000') {
// if (code == '1001') {
// location.href = '/#/login'
// } else {
// Dialog.confirm({
// title: '提示',
// content: msg,
// confirmText: '確定',
// onConfirm: () => console.log('[Dialog.confirm] confirm clicked'),
// })
// }
// }
return res.data
})
//封裝請求方法
function formatReq(type, url, data) {
const tempObj = new FormData()
for(let i in data) {
tempObj.append(i, data[i])
}
tempObj.append('token', store.state.token)
setToken()
return new Promise((reslove, reject) => {
axios({
method: type,
url: `${baseUrl}${url}`,
// headers: {
// //這裡的請求頭與後臺商量設定
// // 'content-Type': 'application/x-www-form-urlencoded'
// 'content-Type': 'application/x-www-from-urlencoded'
// },
cancelToken: source.token,
// data: qs.stringify(data) //java後臺用qs轉
// data:JSON.stringify(data)//PHP後臺用JSON轉
data: tempObj//PHP後臺用JSON轉
})
.then(r => {
// store.commit('UPDATE_LOADING', false); //隱藏loading
//這裡可以新增指定對應狀態碼的處理方式,比如登陸過期,res.data.code === '6666' 路由跳轉到login
reslove(r);
})
.catch(e => {
// store.commit('UPDATE_LOADING', false); //隱藏loading
reject(e.message);
});
});
}
const Http = {
get: (url, query) => {
url = utils.formatUrl(url, query)
setToken();
return axios.get(`${baseUrl}${url}`, { cancelToken: source.token }).then(r => r);
},
post: (url, data) => formatReq('post', url, data),
put: (url, data) => formatReq('put', url, data),
patch: (url, data) => formatReq('patch', url, data),
delete: (url, data) => formatReq('delete', url, data)
};
export default Http;
//處理get請求,傳入引數物件拼接
// let formatUrl = (url, obj) => {
// let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');
// return `${url}${params.substring(0, params.length - 1)}`;
// };
// 使用示例
// methods: {
// async login() {
// let loginInfo = await this.http.post('/api/login/doLogin', this.loginInfo)
// const token = loginInfo.data.token
// // 提交mutation 儲存token
// this.$store.commit('updateToken', token)
// this.cookie.set('token', token)
// Toast.succeed('登入成功')
// setTimeout(() => {
// this.$router.push('/')
// }, 300)
//