axios网络请求

秒速五厘米 2021-07-24 21:01 726阅读 0赞

axios网络请求
    	1、安装
    		cnpm install axios -S
    
    	2、在main.js中引入
    		import Axios from 'axios'
    
    	3、在main.js中将Axios挂载到Vue的原型上(可选)
    		Vue.prototype.$axios=Axios
    	
    	4、axios配置
    		axios({
    			baseURL:'',   路径前缀,会将url的路径添加到后面
    			url:'',
    			method: 'get',  不写默认是 get
    			timeout:n毫秒,	请求超时时间,若超过则取消
    			transformRequest: [function (data, headers) { 允许在向服务器发送前,修改请求数据,只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    			    对data进行任意转换处理,必须返回一个字符串,或ArrayBuffer,或Stream
    			    return data;	
    			}],
    			transformResponse: [function (data) { 在传递给then/catch前,允许修改响应数据
    			   	return data;
    			}],
    			headers: {'X-Requested-With': 'XMLHttpRequest'},	自定义请求头
    			params: {	会被添加到url中的请求参数
    			    ID: 12345
    			},
    			paramsSerializer: function(params) {	参数序列化,如get请求传递的参数是个数组且报错,就可以使用这个选项将其序列化
    			  不配置该参数,数组会默认转换为类似ids[]=1&ids[]=2&ids[]=3
    			  return qs.stringify(params, {arrayFormat: 'brackets'})	转换成类似ids[]=1&ids[]=2&ids[]=3
    			  return qs.stringify(params, {indices: false)				转换成类似ids=1&ids=2&id=3
    			  return qs.stringify(params, {arrayFormat: 'indices'})		转换成类似ids[0]=1&aids1]=2&ids[2]=3
    			  return qs.stringify(params, {arrayFormat: 'repeat'})		转换成类似ids=1&ids=2&id=3
    			  
    			},
    			data:{作为请求主体被发送的数据,适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
    				键值对,会将请求体转换成json格式
    			},
    			data:'name=jeff&age=18',	会将请求体转换成url参数形式,即表单形式	
    			withCredentials: false,	跨域请求时是否需要使用凭证
    			adapter: function (config) {	请求适配器设置,如前台发送ajax、nodejs中发送http请求
    				返回一个 promise 并应用一个有效的响应
    			},
    			auth: {	使用HTTP基础验证,并提供凭据这将设置一个`Authorization` 头,覆写掉现有的任意使用`headers`设置的自定义`Authorization`头
    			  username: 'janedoe',
    			  password: 's00pers3cret'
    			},
    			responseType: 'json',	服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    			responseEncoding: 'utf8',	表示解码响应时使用的编码
    			
    			服务器返回结果时会返回唯一的标识,下次发送请求得传递标识,检测成功才会相应,避免响应其他客户端发送的请求
    				xsrfCookieName: 'XSRF-TOKEN',	跨域请求cookie的标识
    				xsrfHeaderName: 'X-XSRF-TOKEN',	跨域头信息设置
    				
    			onUploadProgress: function (progressEvent) { 上传处理进度事件
    		    	...
    		  	},
    		  	onDownloadProgress: function (progressEvent) {	下载处理进度事件
    			  	...
    			},
    			maxContentLength: 2000,	允许的响应内容的最大尺寸
    			maxRedirects: 5,	定义在node.js中follow的最大重定向数目
    			validateStatus: function (status) {	定义对于给定的HTTP响应状态码是resolve或reject  promise,如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise将被resolve; 否则,promise将被rejecte
    				return status >= 200 && status < 300; // default
    			},
    			socketPath: null,	定义在node.js中使用的UNIX Socket的路径位置,如果使用了proxy代理,优先使用socketPath;
    			httpAgent: new http.Agent({ keepAlive: true }),`httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行http和https时使用的自定义代理,允许像这样配置选项：
    			httpsAgent: new https.Agent({ keepAlive: true }),
    
    		   这将会设置一个`Proxy-Authorization`头,覆写掉已有的通过使用`header`设置的自定义 `Proxy-Authorization` 头。
    		    proxy: {	 'proxy' 定义代理服务器的主机名称和端口
    		      host: '127.0.0.1',
    		      port: 9000,
    		      auth: {	`auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    		       username: 'mikeymike',
    		       password: 'rapunz3l'
    		     }
    		    },
    		    cancelToken: new CancelToken(function (cancel) {
    		    	取消axios请求的配置
    			})
    		})
    		
    		
    	4.5、axios全局配置:
    		全局axios配置:
    			所有的请求都会生效
    			axios.defaults.属性='xxxx'
    			
    		自定义实例配置:
    			const instance = axios.create({
    			  baseURL: 'https://api.example.com'
    			});
    			instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    			
    
    			
    	5、axios实例
    		可用于创建不同域名的请求
    		const instance=axios.create({
    			配置
    		})
    		使用: 使用方式和axios的两种方式相同
    		instance({url:'',...}).then((res)=>{...})
    		instance.get('url',{...}).then(res=>{...})		
    	
    	6、在组件函数中使用
    		(1)get请求:
    
    			 axios.get("url",{配置})
    			.then(res=>{ res.data获取数据})
    			.catch(err=>{console.log(err)})//错误捕捉
    
    		(2)get请求传参:
    			方式一:在url后拼接参数
    			方式二:
    				axios.get('url',{params:{
    					键值对
    				}
    				}).then(res=>res.data)
    				.catch(err=>console.log(err))
    				
    				axios({
    					method:'get',
    					url:'x',
    					params:{
    						键值对
    					}
    				}).then(res=>res.data)
    		
    		(3)post请求
    
    			1、若被拦截,引入qs
    				import qs from 'qs'  将post的参数转换成url?键值对的形式,否则会被拦截
    				因为post中的键值对会以对象形式添加
    		
    			2、创建请求
    			   axios.post(url,data参数,{配置})
    			   axios.post('url',qs.stringify({
    					键值对
    			   }),{配置}).then(res=>{res.data}).catch(err=>console.log(err))
    			   或
    			   axios({
    				   	method:'post',
    				   	url:'x',
    				   	data:{...}或字符串格式
    			   })
    	
    		(4)当后台返回了状态码时
    			axios.get('url').then(
    				()=>{},
    				({response})=>{response.data}  获取错误情况下数据
    			)
    	
    		(5)并行请求
    			axios.all([axios请求1,axios请求2]).then((res)=>{
    				数组
    				res[0]/...
    			})
    			
    			axios.all([axios请求1,axios请求2]).then(
    				axios.spread((res1,res2)=>{
    					...
    				})
    			)
    		
    		(6)axios返回流式内容(前端axios无法使用,import引入的,后端axios才行)
    			(1)node_modules中找到axios
    			(2)将lib/adapters/http.js中的内容全选复制到lib/adapters/xhr.js
    			
    		        axios({method:'get',url,responseType:'stream'}).then(res=>{
    		          res.data.pipe(fs.createWriteStream('C:/Users/10853/Desktop/'+title+".epub"))
    		        })
    		        案例:通过流读取下载电子书
    		        axios({method:'get',url,responseType:'stream'}).then(res=>{
    		          res.data.pipe(fs.createWriteStream('C:/Users/10853/Desktop/'+title+".epub"))
    		          res.data.on('end',function(){
    		            console.log('下载完毕');
    		          })
    		        })
    		        
    
    		(7)axios拦截器
    			拦截器中的两个方法参数和Promise的.then的方法参数效果相同
    			多个请求拦截器:后面的会先执行,因为两个方法参数是被unshift插入执行的集合中
    			多个响应拦截器:前面的会先执行,因为两个方法参数是被push进入执行的集合中
    			
    			(1)添加请求拦截器
    				axios.interceptors.request.use(function (config) {
    				    在发送请求之前做些什么,config为axios的配置对象
    				    config.headers.Authorization=token
    				    
    				    return config;
    				  }, function (error) {	会接收请求拦截器中抛出的错误
    				    对请求错误做些什么
    				    return Promise.reject(error);
    				  });
    			
    			(2)添加响应拦截器
    				axios.interceptors.response.use(function (response) {
    				    对响应数据做点什么,response为axios的返回结果对象
    				    return response;
    				  }, function (error) {
    				    对响应错误做点什么
    				    return Promise.reject(error);
    				  });
    			  
    		(8)取消请求
    			const CancelToken = axios.CancelToken;
    			const source = CancelToken.source();
    			
    			axios.get('/rl', {
    			  cancelToken: source.token 方式一:
    			  cancelToken:new CancelToken((c)=>{
    			  		变量=c;
    			  })
    			}).catch(err=>{
    				  if (err.message == "interrupt") {
    			       	console.log('已中断请求');
    			        return;
    			      }
    			})
    			方式一中断请求:source.cancel('interrupt');
    			方式二中断请求:变量('interrupt');
    			
    		(9)多个请求只发送一次,利用取消请求的特性
    			将取消请求的函数赋值给一个变量,当数据返回时将变量修改为null,每次请求判断变量是否为null,不是则取消
    			const CancelToken = axios.CancelToken;
    			let cont=null;
    			
    			if(cont!==null){
    				cont();
    			}
    			axios.get('/rl', {
    			  cancelToken: source.token 方式一:
    			  cancelToken:new CancelToken((c)=>{
    			  	cont=c;
    			  })
    			}).then(()=>{
    				cont=null;
    			})

代码示例；  
main.js:

import Vue from 'vue'
    import App from './App'
    import Axios from 'axios'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$axios=Axios
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      data:{ foo:'hello foo'},
      components: {  App },
      template: '<App/>'
    })

组件:

<template>
    	
    	<div>
    		
    	</div>
    </template>
    
    <script>
    import qs from 'qs'
    
    export default{ 
    	name:'d',
    	data()
    	{ 
    		return{ 
    
    		}
    	},
    	mounted()
    	{ 
    		this.$axios.get("http://localhost:3000/news")
    		.then(res=>{ 
    			console.log(res.data);
    		})
    		.catch(err=>{ 
    			console.log(err)
    		})
    
    		this.$axios.post("http://localhost:3000/movie",qs.stringify({ id:2})).then(res=>console.log(res.data)).catch(err=>console.log(err))
    	}
    
    
    }
    </script>
    <style lang="css">
    </style>