VUE网络请求中的axios

1. 安装依赖

npm install axios --save

2. 引入到 main.js 中

import axios from 'axios'

3. 加载到 Vue 的原型上，让整个 Vue 可以使用

Vue.prototype.$axios = axios

4. 有可能跨域，这时就要设置代理
   　　在 config 下的 index.js 文件中添加

    proxyTable: {
      '/api':{
        target:'跨域地址',
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      },
    }

在 config 下的dev.env.js 文件中添加

  	API_HOST:'"/api"'

在 config 下的 prod.env.js 文件中添加

  	API_HOST:'"线上的地址"'

这样请求时的 url 就是：

	url: process.env.API_HOST + ''

5. get 请求

	this.$axios({
		method: 'get',
		url: process.env.API_HOST + '',
		params:{},
	})
		.then(data => {
				console.log(data);
			}).catch(err => {
				console.log(err)
			});

6. post请求

	import Qs from 'qs';

	this.$axios({
		method: 'post',
		url: process.env.API_HOST + '',
		data: {},
	    	transformRequest: [(data) => {
	      	data = Qs.stringify(data);
	      	return data;
	    	}],
	    }).then(data => {});

7. 如果传值规定为JSON，那么将

    transformRequest: [(data) => {
      data = Qs.stringify(data);
      return data;
    }],

改为：

	dateType: JSON,

8. 为了传固定的cookie，在 main.js 中添加

	axios.defaults.withCredentials = true;

9. 在 main.js 中配置拦截：

			// 添加请求拦截器
			axios.interceptors.request.use(config => {
			    // 在发送请求之前做些什么
			    return config;
			  }, error => {
			    // 对请求错误做些什么
			    return Promise.reject(error);
			  });

			// 添加响应拦截器
			axios.interceptors.response.use((response) => {
			    // 对响应数据做点什么
			    return response;
			  }, (error) => {
			    // 对响应错误做点什么
			    return Promise.reject(error);
			  });