标签：axios return url options token 封装 response fetch

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。