axios知识点总结

原文地址:https://banggan.github.io/2019/01/04/axios总结/
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在Vue中常用axios来做前后端的交互;
上一张git上的star值
在这里插入图片描述

特点

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

使用

安装:$ npm install axios cdn方式: src=“https://unpkg.com/axios/dist/axios.min.js
基本使用:

Axios.method('url',[...data],options)
.then(function(res){})
.catch(function(err){})

合并请求:

例如:
//定义两个不不同的情请求
var q1 =this.axio.get(‘url’)
var q2= this.post('url','a=1')
//合并q1,q2请求
this.$axios.all([q1,q2])
.then(this.$axios.spread((res1,res2)=>{              //全成功
	this.res1=res1;
	this.res1=res1;
}))
.catch(err=>{              //只要其中一个失败
    console.log(err);
    })

配置公共信息:

this.$ axios.defaults.baseURL = ‘http://sss/ss/s’

options参数还可以为params查询字符串对象;transformRequest转换请求体数据;headers请求头信息;data请求数据,timeout请求超时
场景:所有请求自带的头信息

this.$axios.headers ={};// 覆盖原本默认的头部
this.$ axios.defaults.headers.accept ='abc'//修改个别信息即可

没有使用箭头函数的时候,一定要注意作用域的问题,如上诉代码的that
登录的安全机制
在这里插入图片描述
xsrfCookieName服务器返回一个xsrf-token令牌,保存起来
xsrfHeaderName 请求自动携带x-xsrf-token=xxx

取消请求 断点续传

取消请求

场景:在上传文件的时候,用户发现去、文件错误取消请求

const CancelToken = axios.CancelToken;
const source = CancelToken.source();        //创建标志请求的源对象

axios.get('/user/12345', {
  cancelToken: source.token   // 携带取消的标志 
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token    // 携带取消的标志
})
source.cancel('Operation canceled by the user.'); // 取消导致之前的请求
断点续传

场景:文件上传被中断,需要续传
及时获取到已经上传的部分,保存已上传部分:
this.loaded = progressEvent.loaded
剪裁文件:

this.loaded = progressEvent.loaded   //  获取已经上传的部分
var fileData = this.file.slice(this.loaded +1 , this.file,size)   //裁剪文件
 var fd = new FormData();
 fd.append('file',fileData);   //后续未上传的文件
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
 this.axios.post('url',fd,{
     cancelToken: source.token   // 携带取消的标志
     //处理事件
 })

拦截器

  • 请求拦截器:发起请求之前做的事
  • 响应拦截器:响应回来之后做的事

应用场景1:在请求发起之前,展示一个loading,在响应回来之后,关闭一个loading

send:function(){
//配置拦截器
//use给请求之前做的事可是是多件,可以use很多次
this.$ axios.interceptors.request.use(function(config){
	console.log(config);
	return config;
});
//响应拦截器
this.$ axios.interceptors.reponse.use(function(res){
	console.log(res.config);
	this.isShow = true;  //在请求发起之前,展示一个loading
	return  res.config;
});
this.$ axios.get('url')
.then(res=>{
	console.log('响应回来',res)
	this.isShow = false;  //在响应回来之后,关闭一个loading
}

应用场景2:实现一个类似的cookie机制
服务器 ----设置set-cookie:xxx 保存起来在响应中完成
在请求之前,本地获取xxx,设置拦截器,请求头

sendAjax:function(){
	//  请求拦截器
	this.$axios.interceptors.request.use((config)=>{
	var token = localStroage.getItem('token');   // 设置请求头,类似cookie
	if(token){
	    config.headers['token'] = token ;
	}
    this.isShow = true;  
	return  res.config;
	})
	//  响应拦截器
	this.$axios.interceptors.response.use((res)=>{
		if(res .headers.token){     //获取服务器的响应头
			var token = res.headers.token ;     
			localStroage.setItem('token',token) ; 
    }
    return  res.config;
})
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页