axios - 技术栈

### 文章目录

[@[TOC](文章目录)](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[一、axios的基本使用](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[axios请求](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[1、引用axios,并发送请求](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[axios发送请求的简化写法](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[2、接受响应数据，并对响应的数据进行处理](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[三、axios拦截器（instance）](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[1、请求拦截](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[2、响应拦截](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)
[axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别](#文章目录 @TOC 一、axios的基本使用 axios请求 1、引用axios,并发送请求 axios发送请求的简化写法 2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance） 1、请求拦截 2、响应拦截 axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别)

一、axios的基本使用

axios：是基于ajax封装的一个对象，相对于ajax来说axios有更加强大的API以及更加简化的请求方式。

axios的作用：

1：发送请求

2：处理响应数据

3：响应、请求的拦截

4：取消请求

axios请求

在使用axios之前因为它是第三方库，所以需要进行npm i axios(下载)，之后才可以进行使用这里就不演示了。

1、引用axios,并发送请求

js 复制代码

//引用axios，注意这里的导入数默认暴露的方式，而统一暴露的方式是使用{...}
  import axios from "axios";
/**
 * 发送请求
 * axios({设置请求的参数})  请求要素：1、url:...,2、methods:请求方式,3、请求参数
 * 注意：axios请求完之后返回值的类型是promise类型
 * @type {Promise<AxiosResponse<any>> | *}
 */
 let promised = axios({
      url:"http://forum.atguigu.cn/api/rand.qinghua",
      //设置请求类型
      method:"post",
      //此属性是设置url参数的所以一般都是和get请求搭配使用,但是也是可以与post请求中创建
      //此对象都是以键值对方式将数据放入url
      params:{
          format:'jsond',
      },
      //此对象是将里面的数据放入到请求体当中，一般与post请求搭配使用
      data:{
        name:'zhangshan',
        format:'dataformat'
      }
    })

axios发送请求的简化写法

js 复制代码

  import axios from "axios";
  //post(url: string, data?: D, config?: axios.AxiosRequestConfig<D>): Promise<R>;
  let promised = exios.post("http://forum.atguigu.cn/api/rand.qinghua?format=jsond",{name:"zhangshan", format:"jsond"})

此时就向网址http://forum.atguigu.cn/api/rand.qinghua发送了一个post请求，并且请求体中有name参数和format参数，url参数有format![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/df50c0449b5a4fa9a6432ab1019a51a3.png)

2、接受响应数据，并对响应的数据进行处理

js 复制代码

//获取响应的数据，then响应的状态为result，catch的执行的是响应状态为reject
promised.then(
        //response为响应数据对象,有：
        /**
         * data:   服务端响应回来恶的数据
         * status 响应状态码
         * statusText:状态码的描述  列如：ok
         * headers：本次响应的所有响应头
         * config：本次请求的配置信息
         * request: 本次请求发送时锁使用的XMLHttpRequest对象
         * 例如：
         *      config:{transitional: {...}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, ...}
         *      data:{code: 1, content: '"你可以笑一个吗?""为什么啊?""因为我的咖啡忘加糖了。"'}
         *      headers:AxiosHeaders {content-type: 'application/json'}
         *      request :XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, ...}
         *      status: 200
         *      statusText: ""
         */
        (response)=>{
          console.log(response)
        }
    ).catch(
        /**
         * 此方法是当请求或响应有错误就会执行此方法
         * @param err 此对象是用来接收报错的详细信息
         */
        err=>{
          console.log(err);
        }
    )

三、axios拦截器（instance）

1、请求拦截

js 复制代码

//拦截器
import axios from "axios";

//使用axios创建一可以发起请求的实例对象
const instance = axios.create({
    //设置统一请求网址的前缀
    baseURL:"http://forum.atguigu.cn/",
    //设置请求的超时时间（单位：毫秒）
    timeout:10000

})

//请求拦截器
instance.interceptors.request.use(
    /**
     *设置请求的基本信息
     * @param config    配置参数对象
     * @returns {*}     返回修改之后的配置对象
     */
    config=>{
        console.log("请求拦截器",config);
        //设置请求头中的属性
        config.headers.Accept="application/json, text/html, */*";
        //将设置好的config参数返回，不然无效，且会直接报错，（注意这里不管有没有设置config，都必须要return不然会报错）
        return config
    },
    /**
     *请求失败是就会执行此方法
     * @param error
     */
    error=>{
        console.error('请求方法错误：', error.message);
        //返回一个失败的promise对象
        return Promise.reject(error);
    }
)

2、响应拦截

js 复制代码

//响应拦截器
instance.interceptors.response.use(
    /**
     *  响应状态码为2xx时执行此方法
     * @param response  响应的信息
     * @returns {*}
     */
    (response)=>{
        console.log("response success:",response);
        //最后需要返回的对象
        return response
    },
    /**
     *  当响应有误时执行此方法(错误的判定方式为状态码!=2xx)
     * @param error 报错的详细信息
     * @returns {Promise<never>}
     */
    (error)=>{
        console.log("something wrong:",error);
        //最后返回的定义promise对象
        return Promise.reject(error);
    }
)

export default instance;

资料来源：尚硅谷javaweb

axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别

层面不同 ：Axios 拦截器和 Vue 路由守卫作用于前端，分别针对 HTTP 请求和路由导航；Servlet 过滤器和 Spring拦截器作用于后端，Servlet 过滤器基于 Servlet 容器，Spring 拦截器基于 Spring 框架。
粒度不同：Servlet过滤器作用范围更广，针对整个 Web 应用的 HTTP 请求；Spring 拦截器主要针对 Spring MVC框架内的请求处理；Axios 拦截器仅针对 Axios 发起的请求；Vue 路由守卫仅在 Vue 应用的路由导航过程中生效。