Vue（四）Axios

一、Axios基础

• Axios： Axios是一个Vue官方推荐使用的基于promise的HTTP库，可以在浏览器和node.js中独立使用。本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

• Axios安装：

# 安装axios和vue-axios（简洁使用axios）
npm install --save axios        

• Vue中Axios简单使用：

// ============================= main.js文件 =============================

// 引入axios    
import axios from 'axios'     
// 全局挂载axios            
Vue.use(axios)                  

// ============================= 简单使用 =============================
// 挂载之后，全局任意地方就可以使用this.$axios进行网络请求。参数就是config，用于配置和传参
this.$axios({                
	// 请求方式           
    method:'post',              
    // 请求路径
    url:'/api/test',                   
    // 请求数据（POST/PUT/PATCH）
    data:{                             
        userId:this.userId,
        token:this.token,
    }
// 请求成功返回数据（这里使用了ES6的语法）
}).then((response) =>{          
    console.log(response)     
// 请求失败返回数据
}).catch((error) =>
    console.log(error)          
})

二、Axios使用

• Axios多种请求方式： Axios支持通过不同的方法发送不同类型的请求。

// 基础方式
this.$axios(config)
// 等同于发送axios(config)
this.$axios.request(config)
// 发送get请求
this.$axios.get(url[, config])
this.$axios.delete(url[, config])
this.$axios.head(url[, config])
this.$axios.post(url[, data[, config]])
this.$axios.put(url[, data[, config]])
this.$axios.patch(url[, data[, config]])

• Axios核心参数详解： Axios参数核心是config参数，也就是axios(config)方法中提到的。虽然url、data、请求方式可以分开写，但还是都在config写相对方便。

// 请求的服务器 URL
url: '/user'
// 请求方式
method: 'get'
// 基础URL，会拼接在URL前面。通常封装Axios对象时候用。
baseURL: '/api'
// URL拼接参数
params:{}
// 请求体参数。仅适用PUT、POST、DELETE、PATCH请求方法
data:{}
// 自定义请求头
headers:{'x-Requseted-With':'XMLHttpRequest'}
// 超时配置：如果请求时间超过timeout的值，则请求会被中断，并返回失败
timeout:10000
// 允许在向服务器发送前，修改请求数据
transformRequset:[function(data{})]
// 在传递给 then/catch 前，允许修改响应数据
transformResponse:[function(data){}]

三、Axios拦截器

• Axios请求拦截器：

// 请求拦截器：config包含了请求中所有的数据（例如URL、请求参数、请求方式等）
axios.interceptors.request.use(config => {                                           
		// 从SessionStorage拿取Tocken
		const token = sessionStorage.getItem('token')       
		// 判断是否存在token，如果存在的话，则每个HTTP的Header都加上token
		if (token) {         
			// 请求头加上token                               
			config.headers.authorization = token              
		}
		// 这里一定要进行返回，否则请求进行不下去
		return config                                       
	},
	err => {
		return Promise.reject(err)
	})

• Axios响应拦截器：

// 响应拦截器
axios.interceptors.response.use(response => {
		// 拦截响应，做统一处理 
		if (response.data.code) {
			switch (response.data.code) {
				case 1002:
				store.state.isLogin = false
				router.replace({
					path: 'login',
					query: {
						redirect: router.currentRoute.fullPath
					}
				})
			}
		}
		return response
	},
	// 接口错误状态处理，也就是说无响应时的处理
	error => {
		// 返回接口返回的错误信息
		return Promise.reject(error.response.status) 
	})

四、Vue跨域问题

• Vue跨域问题处理： 本地开发过程中，由于服务没有代理，请求后台会有跨域问题出现，需要在vue.confg.js文件中进行本地运行的代理配置，这样就没有跨域问题了。

// ----------------------------------- vue.config.js ---------------------------------------
module.exports = ({
    devServer: { //设置开发服务器
        proxy: { //设置代理
        	// 当在程序中发送以 '/api' 开头的请求时, 会自动的将请求转发到 target 所表示的目标服务器
            '/api': {                        
            	// 设置目标服务器地址（这里一般就是后台的IP:PORT）              
                target: 'http://waimai.yantianfeng.com/',  
                // 允许跨域
                changeOrigin: true,                    
                // 重写请求地址，如果需要转发，这里需要配置  
                pathRewrite: {}                            
            }
        }
    }
})

五、Axios封装

• Vue跨域问题处理： 当我们从axios模块中导入对象时，使用的实例是默认的实例。当给该实例设置一些默认配置时，这些配置就被固定下来了。但是后续开发中，某些配置可能会不太一样，比如某些请求需要使用特定的baseURL或者timeout等，这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息。

// 设置公用请求前缀
axios.defaults.baseURL = ' ';
// 设置公用请求超时时间
instance.defaults.timeout = 1000