vue+axios+promise实现请求封装

开发vue项目中，为了方便带token等一些公共的头部，需要用到axios的请求封装，下面就是结合axios 和 promise 的请求封装

1. 安装 axios

	npm i axios -save
	npm i qs -save

2. 引入axios 并做一些简单的配置

	import axios from "axios"
	import qs from "qs"
	axios.defaults.baseURL =" http:// xxxx.com/hXXXX"; // 公共请求头
	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
	axios.defaults.timeout = 10000; // 请求超时的时间

3. 接下来我们来封装axios的请求拦截

	axios.interceptors.request.use(function (config) {
	    // 一般在这个位置判断token是否存在
	    return config;
	   }, function (error) {
	    // 对请求错误做些什么
	    return Promise.reject(error);
	});

4. 下来就是响应的拦截

	axios.interceptors.response.use(function (response){
	     // 处理响应数据 根据一些状态来执行一些操作，我这边主要是根据后台传来的status来判断的
	    if (response.status === 200) {            
	        return Promise.resolve(response);        
	    } else {            
	        return Promise.reject(response);        
	    }
    }, function (error){
    // 处理响应失败
    return Promise.reject(error);
});

5. 这些处理完了，我们就开始封装自己的请求方法了

	// 这边用es6 的语法进行导出
	export function get (url,parms){
		return Promise((resolve,reject)=>{
			axios.get(url,{
				params,params
			}).then(res=>{
				resolve(res.data);
			}).catch(err=>{
				reject(err.data)
			})
		})
	}
	export function post(url,parms){
		return Promise((resolve,reject)=>{
			axios.post(url,qs.stringify(parms))
			.then(res=>{
				resolve(res.data);
			}).catch(err=>{
				reject(err.data)
			})
		})
	}

6. 封装完了，那就等着调用把

	// 在main.js 中引入
	import  {get , post } from "axios.js"  //  form 后就加上你文件的地址
	
	Vue.prototype.get = get;
	Vue.prototype.post = post ;

7. 调用的方法

  // 在对应的vue文件中使用
  this.get("url",{data})
   .then((res)=>{
        if(res.status===0){
            resolve(res);  // 正确的返回
        }else{
            //这里抛出的异常被下面的catch所捕获  
            reject(error);
        }
    })
    .catch((err)=>{
    	// 错误数据的处理
        console.log(err);
    })

• 处理axios的跨域的问题 （需要在配置文件中加上下面的代码）

	devServer: {
	   historyApiFallback: true,
	   hot: true,
	   inline: true,
	   stats: { colors: true },
	   proxy: {
	     //匹配代理的url
	     '/api': {
	          // 目标服务器地址
	             target: 'http://xxxxxxx',
	             //路径重写
	             pathRewrite: {'^/api' : ''},
	             changeOrigin: true,
	             secure: false,
	           }
	      },
	    disableHostCheck:true
   }