Axios的功能特点
    1.在浏览器中发送XMLHttpRequests请求
    2.在node.js中发送http请求
    3.支持Promise API
    4.拦截请求和响应
    5.转换请求和响应数据
    6.其他...

Axios框架的安装使用
    在终端中,通过命令安装
        npm install axios --save
    在main.js中导入
    import axios from 'axios'

Axios的请求方式
  1.axios(config)
  2.axios.request(config)
  3.axios.get(url[,config])
  4.axios.delete(url[,config])
  5.axios.head(url[,config])
  6.axios.post(url[,data[,config]])
  7.axios.put(url[,data[,config]])
  8.axios.patch(url[,data[,config]])

Axios最基本的使用
    在导入axios后,配置数据信息
    axios({
      url:'需要请求的服务器地址',
      method:'请求的方式(get/post)'
    }).then((res)=>{
      console.log(res) //输出请求后返回的内容
    })

Axios发送的并发请求
      all()方法: 接收的是一个伪数组,数组里存放我们发送的请求
      axios.all([axios({...},axios({...},...其他请求))]).then((res)=>{...返回的结果处理})
        返回的结果也是一个数组类型.

在开发的过程中,我们不推荐通过全局的axios请求去获取数据,我们希望通过实例去获取数据
      不推荐:
          import axios from 'axios'
          axios({
            ...配置信息
          })
      推荐使用:
        创建一个network文件夹,里面存在一个文件request.js文件,在这个文件里导入axios,然后创建它的实例
        import axios from 'axios'
        1.创建axios实例对象
          const instance=axios.create({
            ...配置axios相关的通用的信息,如:
              baseURL:'默认的网络请求地址'
              timeout:时间数  //网络超时时间
              ....
          })
        2.通过实例对象发送请求
            instance({
              ....网络请求相关配置信息
            })
        3.在文件中导入

Axios的拦截器
    interceptors。
    请求拦截的作用:
      1.当网络配置信息中的一些信息不符合服务器的要求时,拦截下来进行修改.
      2.每次发送网络请求时,都希望在界面中显示一个请求的图标,可以在这里设置
      3.对于某些网络请求(比如登录(token)),必须携带一些特殊的信息.
    1.全局axios的网络拦截器
        对于网络请求的拦截
        axios.interceptors.request.use(config=>{
            return config //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        },err=>{
          return err    //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        })
          config是一个函数参数,携带配置信息,对于请求配置的内容拦截修改
          err是一个函数参数,对于拦截失败执行的函数
        对于响应拦截
        axios.interceptors.response.use(res=>{
          ...相应的处理代码
          return res  //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        },err=>{
            ...相应的处理代码
            return err //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        })
        res是一个对于对于响应数据拦截进行处理的函数
        err是一个对于响应数据拦截失败进行处理的函数
    2.实例对象拦截器
        实例对象.interceptors.request.use(config=>{
            return config //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        },err=>{
          return err    //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        })

        实例对象.interceptors.response.use(res=>{
          ...相应的处理代码
          return res  //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        },err=>{
            ...相应的处理代码
            return err //将拦截到的数据返回出去(这里是必须返回的,不返回,则不能正常接收数据)
        })

在使用axios时,推荐用Promise封装axios,然后在进行调用使用.

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐