Vue axios全局拦截 get请求、post请求、配置请求

最新推荐文章于 2022-11-23 10:02:56 发布

蜗牛速度额

最新推荐文章于 2022-11-23 10:02:56 发布

阅读量2.3k

点赞数 1

分类专栏： vue 文章标签： vue axios

本文链接：https://blog.csdn.net/weixin_41111068/article/details/84493191

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/axios/dist/axios.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
  <h1>axios插件讲解</h1>
  <a href="javascript:;" class="btn btn-primary" v-on:click="get">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" v-on:click="post">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" v-on:click="http">http</a>
  <div>
    <span>{{this.msg}}</span>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: ''
    },
    mounted () {
      // 请求拦截
      axios.interceptors.request.use(config => {
        return config
      },error => {
        return Promise.reject(error)
      })
      axios.interceptors.response.use(response => {
        // 预处理相应的数据
        return response
      }, error => {
        // 错误返回 状态码验证
        return Promise.reject(error)
      })
    },
    methods: {
      get () {
        axios.get('../package1.json', {
          params: {
            userId: '999'
          },
          headers: {
            token: 'jack'
          }
        }).then(res => {
          this.msg = res.data
        }).catch(error => {
          console.log('error init.' + error)
        })
      },
      post () {
        axios.post('../package.json', {
          userId: '888'
        },{
          headers: {
            token: 'tom'
          }
        }).then(res => {
          this.msg = res.data
        }).catch(error => {
          console.log('error init.' + error)
        })
      },
      http () {
        // 配置请求
        axios({
          url: '../package.json',
          method: 'get',
          // if method is post
          data: {
            userId: '101'
          },
          // if method is get
          params: {
            userId: '102'
          },
          headers: {
            token: 'http-test'
          }
        }).then(res => {
          this.msg = res.data
        }).catch(error => {
          console.log('error init.' + error)
        })
      }
    }
  })
</script>
</body>
</html>

蜗牛速度额

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Vue axios全局拦截 get请求、post请求、配置请求

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="../node_modules/vue/dist/vue.js&quot
复制链接

扫一扫