前后台数据搬运工 Axios调用方法统一封装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios特点如下：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

---

开始使用

使用yarn安装 yarn add axios
使用npm安装 npm install axios

基础使用

• GET

		axios.get('/user?ID=12345')
		  .then(function (response) {
		    console.log(response);
		  })
		  .catch(function (error) {
		    console.log(error);
		  });

• POST

		axios.post('/user', {
		    firstName: 'Fred',
		    lastName: 'Flintstone'
		  })
		  .then(function (response) {
		    console.log(response);
		  })
		  .catch(function (error) {
		    console.log(error);
		  });

---

注: 当我们开发前后台分离项目时，我们会调用很多服务，如果每次都基础方式调用，不方便管理而且存在代码重复，也不方便公共操作的实现，比如每次调用服务前组装服务请求头信息等等

---

• 方式一

	import axios from 'axios'
	import {Modal} from 'antd'
	
	import {setCookie,readCookie} from '../utils/cookie';
	
	import TimeUtils from '../utils/time'
	
	const isMock = false;
	
	export default class Axios {
	
	    static ajax(options){
	        let loading;
	        if (options.data && options.data.isShowLoading !== false){
	            loading = document.getElementById('ajaxLoading');
	            loading.style.display = 'block';
	        }
	        let baseApi = "http://localhost:80";
	        if(isMock){
	            baseApi = "https://www.easy-mock.com/mock/5d2340fc05020b09e165b709/bookService";
	        }
	        return new Promise((resolve,reject) =>{
	            axios({
	                url:options.url,
	                method: options.method ? options.method : 'get',
	                baseURL:baseApi,
	                timeout:options.timeout ? options.timeout : 5000,
	                params: options.params  || '',
	                data: options.data || '',
	                headers:{
	                    "Authorization": readCookie("authorization")
	                }
	            }).then(response =>{
	                //设置token
	                if(response.headers.authorization){
	                    setCookie("authorization",response.headers.authorization);
	                    setCookie("change",TimeUtils.dateformat());
	                }
	                if (options.data && options.data.isShowLoading !== false) {
	                    loading = document.getElementById('ajaxLoading');
	                    loading.style.display = 'none';
	                }
	                if (response.status === 200){
	                    let res = response.data;
	                    if (res.status === 0){
	                        resolve(res);
	                    }else{
	                        Modal.info({
	                            title:"提示",
	                            content:res.message
	                        })
	                    }
	                }else {
	                    reject(response.data);
	                }
	            })
	            .catch(error =>{
	                if (options.data && options.data.isShowLoading !== false) {
	                    loading = document.getElementById('ajaxLoading');
	                    loading.style.display = 'none';
	                }
	                Modal.info({
	                    title:"提示",
	                    content:error.message
	                })
	
	            })
	        })
	    }
	}

• 方式二

		import axios from 'axios';
		
		
		// 创建axios实例
		var instance = axios.create();
		//超时设置
		instance.defaults.timeout = '50000';
		
		instance.defaults.baseURL = "http://localhost:8000"
		
		instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
		
		instance.interceptors.request.use(
		    config => {
		        // 统一请求头处理
		        const token = "token";
		        token && (config.headers.Authorization = token);
		        return config;
		    },
		    error => {
		        return Promise.error(error);
		    }
		)
		
		instance.interceptors.response.use(
		    response => {
		        if (response.status === 200) {
		            return Promise.resolve(response);
		        } else {
		            return Promise.reject(response);
		        }
		    },
		    // 服务器状态码不是200的情况
		    error => {
		        if (error.response.status) {
		            switch (error.response.status) {
		                // 401: 未登录
		                // 未登录则跳转登录页面，并携带当前页面的路径
		                // 在登录成功后返回当前页面，这一步需要在登录页操作。
		                case 401:
		                    console.info("跳转登录页")
		                    break;
		                // 403 token过期
		                // 登录过期对用户进行提示
		                // 清除本地token和清空vuex中token对象
		                // 跳转登录页面
		                case 403:
		                    console.info("跳转登录页登陆过期")
		                    // 清除token
		                    localStorage.removeItem('token');
		                    // store.commit('loginSuccess', null);
		                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
		                    setTimeout(() => {
		                        console.info("跳转过期")
		                    }, 1000);
		                    break;
		                // 404请求不存在
		                case 404:
		                    console.info("404")
		                break;
		                // 其他错误，直接抛出错误提示
		                default:
		                    console.info("其他错误")
		            }
		            return Promise.reject(error.response);
		        }
		    }
		);
		
		export default instance;