fetch、axios 封装

axios

// 在vue中封装axios
// yarn add axios qs

// http.js
import axios from 'axios';
import qs from 'qs'
/* 
	根据环境变量配置请求根路径
*/
switch(process.env.NODE_ENV){
	case 'production':
		axios.defaults.baseURL = "http://127.0.0.1:3002";
		break;
	case 'test':
		axios.defaults.baseURL = "http://127.0.0.1:3001";
		break;
	default:
		axios.defaults.baseURL = "http://127.0.0.1:3000";
}

/* x-www-form-urlencoded
	设置超时时间和跨域是否允许携带凭证
 */

axios.defaults.timeout = 10000; //10s
axios.defaults.withCredentials = true; //允许携带cookie

/* 
	设置POST请求头
	application/x-www-form-urlencoded
 */
axios.defaults.headers['content-type'] = 'application/x-www-form-urlencoded'
axios.defaults.tranformRequest = data => qs.stringify(data)

/* 
	设置请求拦截器
	TOKEN校验(JWT)
 */
axios.interceptors.request.use((config)=>{
	// 携带token
	let token = localStorage.getItem('token')
	token && (config.headers.Authorization = token);
	return config;
},err => {
	return Promise.reject(err)
})

/* 
	响应拦截器
 */
// axios.defaults.validateStatus = status => {
// 	// 自定义响应成功的HTTP状态码
// 	return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(response => {
	// 只返回响应主体
	return response.data;
},error => {
	let {response} = error;
	if(response) {
		// 服务器有返回结果
		switch(response.status) {
			case 401: // 登录权限 未登录
				break;
			case 403: // 服务器拒绝执行(token过期)
				break;
			case 404: //找不到页面
				break;
		}
		
	} else {
		// 服务器没有返回结果
		if(!window.navigator.onLine){
			//断网处理：
			return;
		}
		return Promise.reject(error)
	}
});

export default axios;
```'

## fetch
```js
//request.js
import qs from 'qs';

/* 
	根据环境变量配置请求根路径
*/
let baseURL = '';
let baseURLArr = [{
	type:'development',
	url:'http://127.0.0.1:3002'
},{
	type:'test',
	url:'http://127.0.0.1:3001'
},{
	type:'production',
	url:'http://127.0.0.1:3000'
}];

baseURLArr.forEach(item => {
	if(process.env.NODE_ENV === item.type){
		baseURL = item.url;
	}
})

export default function request(url,option = {}) {
	url = baseURL + url
	/* 
		处理get请求
	 */
	!options.method ? option.method = 'GET' : null;
	if(options.hasOwnProperty('params')) {
		if(/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)){
			const ask = url.includes('?' ? '&' : '?');
			url += `${ask}${qs.stringify(params)}`;
		}
		delete options.params;
	}
	
	/* 
	 合并配置项
	 */
	options = Object.assign({
		//允许跨域携带资源凭证 same-origin同源可以 omit都拒绝
		credentials:'include',
		//设置请求头
		headers:{}
	},options);
	options.headers.Accept = 'application/json';
	
	/* token校验 */
	const token = localStorage.getItem('token');
	token && (options.headers.Authorization = token);
	
	/* 
	 POST请求处理
	 */
	if(/^(POST|PUT)$/i.test(options.methos)){
		!options.type ? options.type = 'urlencoded' : null;
		if(options.type === 'urlencoded') {
			options.headers['Content-Type'] ='application/x-www-form-urlencoded';
			options.body = qs.stringify(options.body);
		}
		if(options.type === 'json') {
			options.headers['Content-Type'] = 'application/json';
			options.body = JSON.stringify(options.body);
		}
	}
	
	return fetch(url,options).then(response => {
		// 返回的结果可能是非200状态码
		if(!/^(2|3)\d{2}$/.test(response.status)){
			switch (response.status) {
				case 404: //当前请求需要用户验证 (未登录)
					break;
				case 403: //服务器已经理解请求,但是拒绝执行它(一般是TOKEN过期)
					break;
				case 404: //请求失败,请求所希望得到的资源未被在服务器上发现
					break;
				default:
					return //todo 
			}
		}
		return response.json();
	}).catch(err => {
		// 断网处理
		if(window.navigator.onLine) {
			//断网情况处理逻辑
			return;
		}
		return Promise.reject(err)
	})
}

标签：axios,return,url,options,token,封装,response,fetch
来源： https://www.cnblogs.com/cwl1025/p/16270834.html