封裝axios請求api.js

當你需要編碼URL中的參數的時候，那麼encodeURIComponent是最好方法。

var param = "http://www.cnblogs.com/season-huang/"; //param爲參數
param = encodeURIComponent(param);
var url = "http://www.cnblogs.com?next=" + param;
console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

看到了把，參數中的 “/” 可以編碼，如果用encodeURI肯定要出問題，因爲後面的/是需要編碼的。
axios請求方法封裝：
api.js

import axios from 'axios'
import 'babel-polyfill'
import {getSStore} form './mUtils'
import {Loading} form 'element-ui
// 獲取url中的指定參數
const getUrlParam = (name)=>{
	// 構造一個含有目標參數的正則表達式對象
	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	//匹配目標參數
	let r = window.location.search.substr(1).match(reg);
	if(r != null) return unescape(r[2]);
	return null;
}
let API = axios.create({
	baseURL: host + "yuanailan/",//拼接接口的公共前綴
	timeout: 180000,//可以等待時間三分鐘
	headers:{'Content-Type':'application/x-www-form-urlencoded'}
});
// 如果有需要把loading全局注入
let loading = {};
// 請求攔截
API.interceptors.request.use(config => {
	loading = Loading.service({
		lock: true,
		text: 'Loading',
		spinner: 'el-icon-loading',
		background: 'rgba(0,0,0,0.1)'
	});
	if(config.methord == 'post'){
		config.transformRequest  = [
			function (data) {
				let ret = '';
				for (let it in data){
					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data) + '&';
				}
				return ret;
			}
		]
	}
	return config
},error => {
	loading.close();
	return Promise.reject(error)
})
// 響應時攔截
API.interceptors.response.use(response => {
	loading.close();
	return response
}, error => {
	loading.close();
	return Promise.resolve(error.response)
})
class Api {
	post(url,params){
		const time= new Date().toString();
		let token = getSStore("token")
		return new Promise((resolve,reject) => {
			API.post(`${url}?tokenId=${token}&&datetime=${time}`,{...params})
			.then(res => resolve(res))
			.catch(e => reject(e))
		})
	}
	get(url,params){
		let token = getSStore("token");
		return new Promise((resolve,reject) => {
			API.get(url,{
			params:{
			tokenId: token,
			datetime: new Date().toString(),
			...params}
			})
			.then(res => resolve(res))
			.catch(e => reject(e))
		})
	}
	getToken(){
		let token = getSStore("token");
		return token
	}
	host(){
		let token = getUrlParam ("host");
		return host + "/yuanailan/"
	}
}
 export default new Api()

接口請求封裝
service.js

import api from '@/common/api'
import 'babel-polyfill'
//備註請求名稱
export async function getData(params){
	return api.post('requestApi/getDate/query.action',params)
}
.....