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

<!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>
Vue axios全局拦截 get请求、post请求、配置请求

猜你喜欢
