axios vue 回调函数_axios在vue中的使用

拦截器

请求拦截器使用场景：在请求被处理前拦截，做一些操作(例如：登录状态，通常登录成功后，后端会返回一个token，这个token会存储一些信息，这样前端每次发请求时带token才可以访问一些资源)。

请求拦截器使用方法(use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数)

拓展：promise有两个函数一个是reslove函数，一般成功时用，reject一般失败错误时用。

使用场景：在响应被处理前拦截，做一些操作。

响应拦截器使用方法：(use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数)

拓展：axios.get().then(res=>{})中的then相当于发送请求成功后的回调函数，而axios.get().catch(err=>{})相当于请求成功，对响应失败的处理，也就是reject的err会触发catch方法。

请求错误和响应错误区别：请求错误表示请求没有到达后端，浏览器会报一些错误，比如请求接口没有，就会报404。例如：从数据库查询某一条记录，但是没有，后台返回一个状态码和错误信息，此时就是响应错误(请求到达后端，返回错误称为响应错误。没到达后端，成为请求错误)。

取消拦截器使用方法

使用场景：对拦截器进行取消。

拓展：一般使用拦截器时，都是声明一个变量，给实例添加拦截器，给实例添加属性，一般不会给axios添加内容，避免造成全局污染。

拓展：当在请求拦截器中，对headers的属性进行赋值时，通常使用config.headers.token='',而不是config.headers={token:‘’},因为第二种方式会把headers里的其他属性覆盖掉。

不同axios实例访问不同接口，不同axios实例有不同拦截器，从而实现有需要拦截，有不需要拦截的。

请求拦截器其他使用场景：比如某一个请求，可能需要几秒，此时我们可以通过请求拦截器添加一个页面的等待的样式，等数据响应回来时再取消这个样式。