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;
})