前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。今天我们就来看看axios库。基本上大部分的vue应用都用过axios。早期Vue一般使用vue-resource，没有Vue的时候就是jQuery的无敌$.ajax。axios特性支持浏览器环境，Node环境支持Promise和链式调用。有拦截器功能，可以拦截请求和响应。有一个转换器函数，可以转换请求数据和响应数据。取消请求（fetch不支持取消），CancelToken实现的逻辑。axios的canceltokenAPI是基于cancelablepromisesproposalAPI请求方法axios(config)我最喜欢的方法，修改方便，批量修改其他方法也方便（比如我之前封装了一个axios自动重试库，而且修改速度非常快）。axios(url[,config])axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])axios.post(url[,data[,config]])axios.put(url[,data[,config]])axios.patch(url[,data[,config]])请求配置config{//`url`用于请求ServerURLurl:'/user',//`method`是创建请求时使用的方法method:'get',//默认为get//`baseURL`将自动添加到`url`之前，除非`url`是绝对网址。//通过设置一个`baseURL`可以方便地将相对URL传递给axios实例的方法baseURL:'https://some-domain.com/api/',//`transformRequest`允许修改之前的请求发送给服务器Data//只能在'PUT','POST'和'PATCH'的请求方法中使用//下面数组中的函数必须返回一个字符串，或者ArrayBuffer，或者StreamtransformRequest:[function(data){//对数据返回数据进行任意变换处理；}],//`transformResponse`允许在传递给then/catch之前修改响应数据transformResponse:[function(data){//对数据返回数据进行任意转换处理；}],//`headers`是要发送的自定义请求标头headers:{'X-Requested-With':'XMLHttpRequest'},//`params`是要随请求一起发送的URL参数//必须是A普通对象或URLSearchParams对象params:{ID:12345},//`paramsSerializer`是负责序列化`params`的函数//（例如https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)paramsSerializer:function(params){returnQs.stringify(params,{arrayFormat:'brackets'})},//`data`作为请求体被发送的数据//只适用于'PUT','POST',和'PATCH'这几个请求方法//当没有设置`transformRequest`时，它必须是以下类型之一：//-string,plainobject,ArrayBuffer,ArrayBufferView,URLSearchParams//-特定于浏览器：FormData,File,Blob//-特定于节点：流数据：{firstName:'Fred'},//`timeout`指定毫秒数请求超时（0表示不超时）//如果请求超过`timeout`，请求将被中断timeout:1000,//`withCredentials`表示跨域请求是否需要凭据withCredentials:false,//默认//`adapter`允许自定义处理请求，使测试更容易//返回一个承诺并应用一个有效的响应（参见[responsedocs](#response-api)）。adapter:function(config){/*...*/},//`auth`表示应该使用HTTP基本身份验证，并提供凭据//这将设置一个`Authorization`标头，覆盖任何现有的自定义`Authorization`setusing`headers``Headerauth:{username:'janedoe',password:'s00pers3cret'},//`responseType`表示服务器响应的数据类型，可以是'arraybuffer','blob','document','json','text','stream'responseType:'json',//默认//`xsrfCookieName`是用作xsrf令牌值的cookie的名称xsrfCookieName:'XSRF-TOKEN',//默认//`xsrfHeaderName`是xsrf承载的名称令牌值的HTTP标头的名称xsrfHeaderName:'X-XSRF-TOKEN',//默认//`onUploadProgress`允许允许处理上传的进度事件onUploadProgress:function(progressEvent){//processingofnativeprogressevents},//`onDownloadProgress`允许处理下载的进度事件onDownloadProgress:function(progressEvent){//processingofnativeprogressevents},//`maxContentLength`定义允许的响应内容的最大大小maxContentLength:2000,//`validateStatus`定义如果`validateStatus`返回`true`（或设置为`null`或`undefined`),promise将被解析；否则，promise将被拒绝validateStatus:function(status){returnstatus>=200&&status<300;//默认},//node中定义的`maxRedirects`.js中要遵循的最大重定向数//如果设置为0，则不会遵循任何重定向maxRedirects:5,//默认值//`httpAgent`和`httpsAgent`用于在node.js中定义自定义代理，以便在执行http和https时使用。允许配置这样的选项：//默认情况下不启用`keepAlive`httpAgent:newhttp.Agent({keepAlive:true}),httpsAgent:newhttps.Agent({keepAlive:true}),//'proxy'定义一个代理服务器//`auth`表示应该使用HTTP基本身份验证来连接到代理，并提供凭据//这将设置一个`Proxy-Authorization`标头，覆盖任何使用`header`设置的现有标头Custom`Proxy-Authorization`标头。proxy:{host:'127.0.0.1',port:9000,auth::{username:'mikeymike',password:'rapunz3l'}},//`cancelToken`指定用于取消请求的取消令牌//(请参阅下面的取消部分了解更多信息）cancelToken:newCancelToken(function(cancel){})}response{//`data`服务器提供的响应data:{},//`status`来自serverresponseCodestatus:200,//`statusText`是来自服务器响应的HTTP状态信息statusText:'OK',//`headers`服务器响应的标头：{},//`config`是配置为请求配置提供的信息：{}}Axios.all(iterable)是其他方法处理并发请求的辅助函数。可以理解为Promise.allaxios.spread(callback)将响应拆解成单独的输入参数。axios.create([config])使用自定义配置创建一个新的axios实例，比如针对不同的业务，打包进行针对性的配置。也可以默认配置，比如axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';因为涉及多个配置，所以会有优先级。顺序是：在lib/defaults.js中找到库的默认值，然后是实例的默认属性，最后是请求的配置参数。后者将优先于前者。下面是一个例子：//使用库提供的配置的默认值来创建实例//此时超时配置的默认值为`0`varinstance=axios.create();//覆盖库超时的默认值//所有请求现在在超时前等待2.5秒instance.defaults.timeout=2500;//为已知需要很长时间的请求覆盖超时instance.get('/longRequest',{timeout:5000});序列化paramsSerializer需求比较普遍，比如数组如何显示？paramsSerializer是一个负责params序列化的函数（例如https://www.npmjs.com/package...http://api.jquery.com/jquery.param/）paramsSerializer:function(params){returnQs.stringify(params,{arrayFormat:'brackets'})},interceptor//添加请求拦截器axios.interceptors.request.use(function(config){//在发送请求之前做一些事情returnconfig;},function(error){//处理请求错误returnPromise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){//处理响应数据returnresponse;},function(error){//处理响应错误returnPromise.reject(error);});//移除拦截器varmyInterceptor=axios.interceptors.request.use(function(){/*...*/});axios.interceptors.request.eject(myInterceptor);中止请求变量CancelToken=axios.CancelToken;varsource=CancelToken.source();axios.get('/user/12345',{cancelToken:source.token}).catch(function(thrown){if(axios.isCancel(thrown)){console.log('请求取消',thrown.message);}else{//处理错误}});//取消请求（消息参数可选）source.cancel('Operationcanceledbytheuser.');请注意，axios依赖于原生ES6Promise实现支持。如果你的环境不支持ES6Promise，你可以使用polyfill。Android4.x，别问我为什么兼容这么低的版本，哭就是了。responseType表示服务器响应的数据类型，可以是'arraybuffer'、'blob'、'document'、'json'、'text'、'stream''。流仅在Node中可用。arraybuffer、blob、document只能在浏览器中使用。如果在node中使用proxy的一些服务，会出现无法访问的问题。考虑使用axios-https-proxy-fix微信公众号：前端linong参考前端培训目录，前端培训规划，前端培训计划
