？全局配置可以在每次发起请求时单独配置，但是如果是所有请求都必须添加的一些配置项，可以全局配置，这样会节省很多代码，也比较优雅。全局配置之后，组件中的每个组件第一次使用axios发起请求，不需要import吗？答案是：yesaxiox安装如果你使用npm$npminstallaxios-Scnpm同样$cnpminstallaxios-S如果你使用yarn$yarnaddaxios-Stitledirectoryfiledirectoryglobalconfigurationaddconfigurationitemsimportconfigurationincomponents使用拦截器packageinterceptorworkflowrequestandresponsepackageinterceptorpackagewithglobalconfigurationimportinterceptoraxiosallconfigurationitemsfiledirectoryaxiosglobalconfigurationandinterceptorpackage,你可以创建一个js文件来管理，你可以把它放在任何你想放的地方，但是最后，必须在main.js项目入口文件中引入，并关联到Vue实例。当然你也可以直接在main.js里面写，但是可能会显得入口文件的代码过于臃肿。我选择在src目录下创建一个axios文件夹，然后在里面创建一个index.js文件来管理axios的全局配置和拦截器打包路径：./src/axios/index.js全局配置步骤：添加配置Item导入配置实例在组件中使用add配置项，在axios/index.js中进行全局配置。exportaxios/index.js//1.importimportaxiosfrom"axios";//2.创建实例constinstance=axios.create(config)//3.配置信息letconfig={//每个请求的协议，IP地址。设置这个配置后，每个请求路径都可以使用相对路径，比如"/admin/login"baseURL:"http://localhost",//请求超时timeout:10000,//每个请求携带一个cookiewithCredentials:true}//4.exportexportdefaultinstance如果想做更多的全局配置，可以查看文末：axiosallrequestconfigurationitemstoimportconfiguration既然要实现整个项目的全局运行，您必须将它添加到入口文件main.在下一篇js中，引入刚刚在main.js中配置的axios实例，并将该实例设置为Vue原型main.jsimport中的一个方法...//1.引入实例importaxiosfrom'./axios'//因为我只在axios文件夹下创建了一个index.js文件，那么webpack会默认打包该文件，所以这里的路径不需要加'/index.js'//如果你创建的文件名不是index,然后一定要加上文件名//如果你的axios配置文件和我创建的路径不一样，你可以按照你的路径导入//2.关联Vue.prototype.$axios和Vue实例=axiosnewVue({...})在组件中使用因为我们在Vue原型中将axios封装为一个方法，那么我们就不需要在组件中引入axios了，我们已经做了一个全局配置，然后在组件中单独引入axios，引入的是一个新的实例，而不是包含全局配置项test.vue
拦截器封装如果你配置了全局配置，那么封装拦截器的方法就不同了，axios拦截器基于全局配置的封装拦截器的工作流程提出了一个问题：拦截器拦截的是什么？在哪里拦截？什么时候拦截？拦截器分为请求拦截和响应拦截。请求拦截是在发送http请求之前，响应拦截是在服务器返回响应之后。下图展示了拦截器的工作流程。请求和响应的封装也在./src/axios/index.js文件中，封装拦截器就是封装导入的axios实例，所以最后导出导入的axios实例来请求拦截器参数：...request.use((config)=>{},(err)=>{}),其中config为请求配置项响应拦截器参数：...response.use((res)=>{},(err)=>{})axios/index.jsimportaxiosfrom"axios";//1.请求拦截axios.interceptors.request.use(//请求前做什么config=>{if(...){//满足判断条件并做响应处理，比如携带tokenconfig.headers.token=localStorage.getItem("token")//最后返回config继续发送请求returnconfig}else{//如果不满足判断条件,直接返回就是拦截请求return}},//请求错误怎么办err=>console.log(newError(err)));//2.响应拦截instance.interceptors.response.use(//成功响应的处理res=>{returnres;},//用于错误响应处理err=>console.log(newError(err)));//3.导出实例exportdefaultaxiosinterceptorencapsulationwithglobalconfiguration如果你做了全局配置，那么封装拦截器的方法和上面有些不同区别：用axios.create()创建的全局配置项封装实例axios/index.jsimportaxiosfrom"axios"//全局配置constinstance=axios.create({...})//请求拦截实例。interceptors.request.use((config)=>{...},(err)=>{...})//响应拦截instance.interceptors.response.use((res)=>{},(err)=>{})//export也要正确导入exportdefaultinstanceimportinterceptoralsoimportmain.jsimportintheentryfilemain.js...importaxiosfrom"./axios"//设为全局方法vue.prototype.$axios=axiosnewVue({...})axios的所有request配置项都可以转官网：axios中文网--request配置项{//`url`用于请求服务器URLurl:'/user',//`method`是用于创建请求的方法method:'get',//默认//`baseURL`将自动添加到`url`之前，除非`url`是绝对URL//通过设置一个`baseURL`可以方便地将相对URL传递给axios实例的方法baseURL:'https://some-domain.com/api/',//`transformRequest`允许修改之前的请求发送给服务器Data//只能用在'PUT','POST'和'PATCH'的请求方法中//下面数组中的函数必须返回一个字符串，或者ArrayBuffer，或者StreamtransformRequest:[function(data,headers){//对数据返回数据进行任意变换处理；}],//`transformResponse`允许在传递给then/catch之前修改响应数据transformResponse:[function(data){//对数据返回数据进行任意转换处理;}],//`headers`是要发送的自定义请求标头普通对象或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`作为请求中要发送的数据传递body//只适用于'PUT','POST','PATCH'这几个请求方式//当没有设置`transformRequest`时，必须是以下类型之一://-字符串、普通对象、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`headerauth:{username:'janedoe',password:'s00pers3cret'},//`responseType`表示服务器响应的数据类型，可以是'arraybuffer','blob','document','json','text','stream'responseType:'json',//默认//`responseEncoding`指示用于解码响应的编码//注意：忽略'stream'的`responseType`或客户端请求responseEncoding:'utf8',//默认//`xsrfCookieName`是用作xsrf令牌值的cookie的名称xsrfCookieName:'XSRF-TOKEN',//default//`xsrfHeaderName`是携带xsrf令牌值的http标头的名称xsrfHeaderName:'X-XSRF-TOKEN',//默认//`onUploadProgress`允许处理上传进度事件下载进度事件onDownloadProgress:function(progressEvent){//处理本机进度事件},//`maxContentLength`定义允许的响应内容的最大大小maxContentLength:2000,//`validateStatus`定义是否为一个给定的HTTP响应是resolve或rejectpromise如果validateStatus返回true（或设置为null或undefined），承诺将被解决；否则，promise将被拒绝validateStatus:function(status){returnstatus>=200&&status<300;//default},//`maxRedirects`定义了node.js中要遵循的最大重定向数//如果设置为0，则不会遵循任何重定向maxRedirects:5,//default//`socketPath`定义了一个UNIXSocket在node.js中使用。//例如'/var/run/docker.sock'将请求发送到docker守护进程。//只能指定`socketPath`或`proxy`。//如果两者都指定，则使用`socketPath`。socketPath:null,//default//`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){})}如果看完这篇文章你觉得没有任何收获，希望你能耐心再读一遍，也希望你能学会使用axios和拦截器的全局配置。
