1. 程式人生 > >使用async和await封裝vue中的http請求

使用async和await封裝vue中的http請求

開發十年,就只剩下這套架構體系了! >>>   

  • 實際需求中經常會碰到想非同步請求程式碼寫的像同步一樣簡潔,解決回撥地獄,這是最近封裝的一個。
// 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)
//