axios安装步骤 axios请求拦截和响应拦截

Axios 是一个基于promise 的一个HTTP库,可以用在浏览器和node.js中

优势:

从浏览器中创建XMLHttpRequests
从node.js创建http 请求
支持promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御 XSRF
axios安装步骤 axios请求拦截和响应拦截_第1张图片

安装步骤

npm install axios --save

引入

	//在main.js中全局引入
	import Axios from "axios"
	Vue.prototype.$axios = Axios

页面中如何使用

this.$axios.get(  )

全局配置

/*这里的Axios和上面引入时Vue.prototype.$axios = Axios 相同*/
Axios.defaults.baseURL = 'https://api.example.com';	 
//Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  作者信息可不写
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

//在请求或响应被 then 或 catch 处理前拦截它们。
//先在main.js引入	
import qs from "qs"  //处理请求的data
	// 添加请求拦截器
	axios.interceptors.request.use(function (config) {
	    // 在发送请求之前做些什么
	    if( config.method == "post" ){
	    	config.data = qs.stringify( config.data )
	    }
	    return config;
	  }, function (error) {
	    // 对请求错误做些什么
	    return Promise.reject(error);
	  });
	  
	// 添加响应拦截器
	axios.interceptors.response.use(function (response) {
	    // 对响应数据做点什么
	    if( response.status !== 200 ){   //如果响应不等于200,就不向下解析
	    	return;
	    }
	    return response;
	  }, function (error) {
	    // 对响应错误做点什么
	    return Promise.reject(error);
	  });

你可能感兴趣的:(vue)