網路封裝APi

vue專案-封裝API介面

1.在/src/下建立一個js檔案 AxiosAsk.js

import Vue from 'vue'
import axios from 'axios'
var vm = '';
Vue.prototype.thisVm = function(_this) {
	vm = _this;
}
const APIASK = (url, type, data) => {
	let hostUrl = JSON.parse(localStorage.LMUrl).hostUrl;
	let ax = {
		method: type,
		url: hostUrl + url,
		headers: {
			"token": data.token
		},
		data: {},
		timeout: 15000
	}
	if (type == 'post') {
		ax.data = data;
	} else if (type == 'get') {
		ax.params = data;
	}
	let res = axios(ax).then((data) => {
        //自定義模組
		if (data.status == 200) {
			if (data.data.code == 400) {
				vm.$message.error(data.data.msg);
			} else if (data.data.code == 402) {
				vm.$router.push({
					path: '/'
				})
			}
		} else {
			vm.$message.error('伺服器錯誤');
		}
        //自定義模組 END
		return data.data
	}).catch((error) => {
		vm.$message.error('網路請求超時');
		return 'NetworkError';
	})
	return res
}
 
export default {
	APIASK
}

2.App.vue

created() {
    this.thisVm(this);
}

3.vue頁面呼叫

import $http from '../AxiosAsk'

let data = {//傳給介面的資料    
    token: this.token
};
let res = $http.APIASK('/login', 'post', data);
Promise.resolve(res).then(data => {
    if (data.code == 0) {
        //介面資料
    }
})