Vueaxios全局拦截get请求、post请求、配置请求的实例代码-创新互联

下面通过一段代码给大家介绍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">
 <h2>axios插件讲解</h2>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" v-on:click="get">Get请求</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary" v-on:click="post">Post请求</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：Vueaxios全局拦截get请求、post请求、配置请求的实例代码-创新互联
URL地址：https://www.cdcxhl.com/article24/jepce.html

成都网站建设公司_创新互联，为您提供做网站、网站排名、品牌网站建设、品牌网站制作、ChatGPT、手机网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容