复习AJAX03 -axios 拦截器,文件上传,XMLHttpRequest

最新推荐文章于 2024-07-23 10:01:18 发布

我的Y轴是反的

最新推荐文章于 2024-07-23 10:01:18 发布

阅读量573

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/vip77778888/article/details/122442103

版权

使用 XMLHttpRequest 发起 GET 请求

发起 Ajax 请求的核心对象是什么？

怎样拿到服务器响应回来的数据？

发起 GET 请求时携带查询参数

使用 XMLHttpRequest 发起 POST 请求，并携带查询参数

使用 XMLHttpRequest 发起 POST 请求，并携带请求体数据

拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

不使用拦截器 - 与使用拦截器

不使用拦截器

// 配置请求根路径
    axios.defaults.baseURL = 'http://www.liulongbin.top:3009'

    $(function () {
      // 点击按钮，发起 GET 请求
      $('#btnGET').on('click', function () {
        // 展示 loading 效果
        $('.loading-box').show()
        axios.get('/api/get').then(function (res) {
          // 隐藏 loading 效果
          $('.loading-box').hide()
          console.log(res.data)
        })
      })

      // 点击按钮，发起 POST 请求
      $('#btnPOST').on('click', function () {
        // 展示 loading 效果
        $('.loading-box').show()
        axios.post('/api/post', { name: 'zs' }).then(function (res) {
          // 隐藏 loading 效果
          $('.loading-box').hide()
          console.log(res.data)
        })
      })

      $('#btnBooks').on('click', function () {
        // 展示 loading 效果
        $('.loading-box').show()
        axios.get('/api/getbooks').then(function (res) {
          // 隐藏 loading 效果
          $('.loading-box').hide()
          console.log(res.data)
        })
      })
    })

使用拦截器

 // 配置请求根路径
    axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
    // 请求拦截
    axios.interceptors.request.use(function (config) {
      //请求成功
      $('.loading-box').show()
      return config
    }, function (error) {
      //请求失败

      return Promise.reject(error)
    })

    // 响应拦截
    axios.interceptors.response.use(function (response) {
      //响应成功
      $('.loading-box').hide()
      return response // 必须要有return response
    }, function (error) {
      $('.loading-box').hide()
      return Promise.reject(error)
    })



    $(function () {
      // 点击按钮，发起 GET 请求
      $('#btnGET').on('click', function () {
        // 展示 loading 效果

        axios.get('/api/get').then(function (res) {
          // 隐藏 loading 效果

          console.log(res.data)
        })
      })

      // 点击按钮，发起 POST 请求
      $('#btnPOST').on('click', function () {
        // 展示 loading 效果

        axios.post('/api/post', {
          name: 'zs'
        }).then(function (res) {
          // 隐藏 loading 效果

          console.log(res.data)
        })
      })

      $('#btnBooks').on('click', function () {
        // 展示 loading 效果

        axios.get('/api/getbooks').then(function (res) {
          // 隐藏 loading 效果

          console.log(res.data)
        })
      })
    })