什么是axios？Axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用。Axios的特点从浏览器创建XMLHttpRequests从node.js创建https请求支持PromiseAPI拦截请求数据和响应数据取消请求自动转换JSON数据如何引入客户端支持防御XSRF？使用npm导入$npminstallaxios使用bower导入$bowerinstallaxios使用cdn导入使用xhr封装ajax请求参数//4.响应json数据自动解析成js对象/数组函数axios({url,method='GET',params={},data={}}){//返回一个Promise对象returnnewPromise((resolve,reject)=>{//处理方法（大写）method=method.toUpperCase()//处理查询参数（拼接到url）id=1&xxx=abc/*{id:1,xxx:'abc'}*/letqueryString=''Object.keys(params).forEach(key=>{queryString+=`${key}=${params[key]}&`})if(queryString){//删除最后一个&queryString=queryString.substring(0,queryString.length-1)//接收urlurl+='?'+queryString}//1.执行异步ajax请求//创建xhr对象constrequest=newXMLHttpRequest()//打开连接（初始化请求，无请求）request.open(method,url,true)//发送请求if(method==='GET'||method==='DELETE'){request.send()//异步}elseif(method==='POST'||method==='PUT'){request.setRequestHeader('Content-Type','application/json;charset=utf-8')//告诉服务器请求体的格式为request.send(JSON.stringify(data))//发送请求参数injson格式}//绑定状态监听request.onreadystatechange=function(){//发送请求是异步的，绑定状态的监听是同步的，所以这个函数可以放在前面也可以放在后面if(request.readyState!==4){return}//如果响应状态码在[200,300]之间，代表成功,否则失败//es6解构赋值const{status,statusText}=request//如果请求成功，调用resolve()if(status>=200&&status<=299){//准备result数据对象responseconstresponse={data:JSON.parse(request.response),//Responsebody解析后的数据status,//Responsebody状态码statusText//responsebody对应的文本}resolve(response)}else{//如果请求失败，调用reject()reject(newError('requesterrorstatusis'+status))}}})}指定默认配置有三个常用的全局axios默认值：axios.defaults.baseURL='https://api.example.com';axios.defaults.headers.common['Authorization']=AUTH_TOKEN;//传入tokenaxios.defaults.headers。post['Content-Type']='application/x-www-form-urlencoded';发送前对所有字符进行编码，这个设置是默认设置我们常用的设置是axios.defaults.baseURL，用来定义url地址，这样我们传参的时候只传参数对应的参数。example://指定默认配置axios.defaults.baseURL='http://localhost:3000'/*1.GET请求：从服务器获取数据*/functiontestGet(){axios({url:'/posts',params:{id:1}}).then(response=>{console.log('/postsget',response.data)})}/*2.POST请求：存储数据到服务器*/functiontestPost(){axios({url:'/posts',method:'post',data:{title:"json-server4",author:"typicode4"}}).then(response=>{console.log('/postspost',response.data)})}/*3.PUT请求：更新服务器已有数据*/functiontestPut(){axios({url:'/posts/4',method:'put',数据：{title:"json-server5",author:"typicode5"}}).then(response=>{console.log('/postsput',response.data)})}/*4.DELETE请求：删除服务端数据*/functiontestDelete(){axios({url:'/posts/4',method:'delete',}).then(response=>{console.log('/postsdelete',response.data)})}自定义实例默认值我们为什么要设计自定义实例？响应需求：项目中部分接口需要的配置和另一部分需要的配置不一样解决方法：新建2个axios实例，每个实例都有自己独特的配置，可以应用于不同需求的请求接口constinstance=axios.create({baseURL:'http://localhost:4000'})//使用实例发送请求instance({url:'/xxx'//request4000})instance.get('/xxx')//创建第二个实例来改变不同的配置constinstance2=axios.create({baseURL:'htto://localhost:8081'})instance2({url:'/yyy'})instance2.get('/yyy')requestinterceptor//添加请求拦截器（回调函数）axios.interceptors.request.use(config=>{//发送请求前会执行以下内容console.log('requestinterceptor1onResolved()')returnconfig},error=>{//如果发送请求失败，会执行下面的console.log('requestinterceptor1onRejected()')returnPromise.reject(error)})//添加响应函数axios.interceptors.response.use(response=>{//响应数据成功后，会执行下面的console.log('responseinterceptor1onResolved')returnresponse},function(error){//响应数据失败后，会执行下面的console.log('responseinterceptor1onRejected')returnPromise.reject(error)})//Send请求axios。get('http://localhost:3000/posts').then(response=>{console.log('data',response.data)}).catch(error=>{console.log('error',error.message)})取消请求当我们点击按钮发送请求时，如果此时正在发送请求，但用户不知道，用户可能会重复点击按钮发送请求，此时我们使用取消请求，如果当前请求还在响应，用户再次点击按钮取消上一次发送的请求，防止服务器收到多次请求，多次响应例子：//定义拦截器模块//添加请求拦截器axios.interceptors.request.use((config)=>{//在准备发送请求之前取消未完成的请求，这样当重复点击时，取消上次发送的请求if(typeofcancel==='function'){cancel('cancelrequest')}//在config中添加一个cancelToken配置config.cancelToken=newCancelToken(functionexecutor(c){//c用于取消当前的Functionrequest//保存取消函数，后面可能需要取消当前请求cancel=c;})returnconfig})//添加响应拦截器axios.interceptors.response.use(//当响应成功后那，取消发送请求时添加的取消函数response=>{cancel=nullreturnresponse},error=>{if(axios.isCancel(error)){console.log('请求取消错误',error.message)//中断Promise链来中断请求returnnewPromise(()=>{})}else{//请求t是错误的cancel=null//console.log('Request1failed',error.message)//将错误向下传递//抛出错误接下来将错误向下传递returnPromise.reject(error)}})//引入CancelToken结构体FunctionconstCancelToken=axios.CancelToken;letcancel//用来保存请求的函数functiongetProduct1(){axios({url:'http://localhost:4000/products1',}).then(response=>{console.log('请求1成功',response.data)},error=>{//只用于处理请求失败，取消请求的错误不使用console.log('Request1failed',error.message)})}强制取消request/*取消请求*/functioncancelReq(){//alert('cancelrequest')//执行取消请求的函数//发送数据的按钮没有被点击，当发送数据的按钮被点击clicked按钮按下后，cancel会存储一个function//所以在请求强制取消的时候需要判断cancel是否是一个function。如果是function，说明还在发送请求if(typeofcancel==='function'){cancel('Forcecancellationrequest')}else{console.log('Nocancelablerequest')}}以上就是axios的总结，如果有帮助请点赞！具体应用也可以去官方文档查看官方中文文档
