脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue axios使用方法

Vue学习之axios的使用方法实例分析

 更新时间：2020年01月06日 10:32:43   作者：theVicTory  
这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下

本文实例讲述了Vue学习之axios的使用方法。分享给大家供大家参考，具体如下：

Axios 是一个用于实现网络数据请求的JavaScript库，可以用在网页和 node.js 中，用于创建 XMLHttpRequests，vue官方支持使用axios代替vue--resourse来实现网络数据请求。

使用前需要在你的项目中安装axios，例如通过npm安装库：

npm install --save axios

接着在项目中引入axios：

import axios from 'axios'

1、get请求

直接使用axios的全局变量来调用get方法，get中第一个参数传递url，第二个参数是相关配置，在其中可以传递params参数（参数以？形式加在url末尾），进行header的设置等。使用.then接收返回值，可以采用函数来处理返回结果res，其中res.data或者res.body是返回的数据。使用.catch捕获异常，并可以打印错误信息参数error。

axios.get('data/zodiac.json',{
 params:{
  id:"101"
 },
 header:{
  token:"axios"
 }
}).then(res =>{
 this.msg=res.data;
}).catch(error =>{
 console.log(error);
})

2、post请求

post方法调用、回掉、异常捕获的使用与get类似。不同的是其参数分为三个，第一个是url地址，第二个是要传递的数据，第三个是传输选项配置。与get方法不同，post专门使用第二个参数进行数据传递，而不像get中将数据设置在配置选项params中。

axPost(){
 axios.post('./data/test.php',    //url
  {                 //发送的数据
   userId:'105'
  },
  {                 //option选项
   headers:{
    token:"axPost"
   }
  }
 ).then(res =>{            //接收结果
  this.msg=res.data;
 }).catch(err=>{           //处理错误
  this.msg=err;
 })
}

3、HTTP请求

也可以直接使用http进行数据请求，直接进行url、method、data、headers、params等的设置，例如使用http发送post请求：

axios({
 url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json",
 method:"post",
 data:{
  userId:"106"
 },
 headers:{
  token:"axHttp"
 }
}).then(res=>{
 this.msg=res.data;
})

4、拦截器

axios也提供了在网络请求发送前与数据返回时进行拦截的函数interceptors，以便进行相关处理。例如在发送前使用request.use拦截，进行你想要的执行的操作后再将config返回出去，在请求返回时使用response.use进行拦截，操作后再将结果返回：

axios.interceptors.request.use(config =>{
 console.log("axois请求");
 return config;
});
axios.interceptors.response.use(res =>{
 console.log("axois回调");
 return res;
})

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 前端vue面试总问watch和computed区别及建议总结

    前端vue面试总问watch和computed区别及建议总结

    在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议
    2023-10-10
  • 在vue或H5中如何使用复制粘贴功能

    在vue或H5中如何使用复制粘贴功能

    这篇文章主要介绍了在vue或H5中如何使用复制粘贴功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue动态绑定多个类名方法详解(:class动态绑定多个类名)

    vue动态绑定多个类名方法详解(:class动态绑定多个类名)

    vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue组件通信入门之Provide和Inject机制

    Vue组件通信入门之Provide和Inject机制

    这篇文章主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-12-12
  • vue之computed的缓存特性

    vue之computed的缓存特性

    这篇文章主要介绍了vue之computed的缓存特性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue中的@click.native 原生点击事件

    vue中的@click.native 原生点击事件

    这篇文章主要介绍了vue中的@click.native 原生点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue.js $refs用法案例详解

    Vue.js $refs用法案例详解

    这篇文章主要介绍了Vue.js $refs用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 帮助我们高效操作的Virtual DOM简单实现

    帮助我们高效操作的Virtual DOM简单实现

    这篇文章主要为大家介绍了帮助我们高效操作Virtual DOM简单实现及原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • 详解如何使用Vue2做服务端渲染

    详解如何使用Vue2做服务端渲染

    本篇文章主要介绍了如何使用Vue2做服务端渲染 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 深入理解Vue3里的EffectScope

    深入理解Vue3里的EffectScope

    本文主要介绍了Vue3里的EffectScope，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论