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-video-player使用心得(兼容m3u8)

    详解vue-video-player使用心得(兼容m3u8)

    这篇文章主要介绍了详解vue-video-player使用心得(兼容m3u8),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue应用qs插件实现参数格式化示例详解

    Vue应用qs插件实现参数格式化示例详解

    这篇文章主要为大家介绍了Vue应用qs插件实现参数格式化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue 请求后台数据的实例代码

    vue 请求后台数据的实例代码

    本篇文章主要介绍了vue 请求后台数据的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧、
    2017-06-06
  • 浅谈 Vue v-model指令的实现原理

    浅谈 Vue v-model指令的实现原理

    vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue项目添加多页面配置的步骤详解

    vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置。这篇文章主要介绍了vue项目添加多页面配置,需要的朋友可以参考下
    2019-05-05
  • vue3 TS vite element ali-oss使用教程示例

    vue3 TS vite element ali-oss使用教程示例

    这篇文章主要为大家介绍了vue3 TS vite element ali-oss使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue实现登录界面

    vue实现登录界面

    这篇文章主要为大家详细介绍了vue实现登录界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • vue项目开发中setTimeout等定时器的管理问题

    vue项目开发中setTimeout等定时器的管理问题

    这篇文章主要介绍了vue项目开发中setTimeout等定时器的管理问题,需要的朋友可以参考下
    2018-09-09
  • Vue-Router2.X多种路由实现方式总结

    Vue-Router2.X多种路由实现方式总结

    下面小编就为大家分享一篇Vue-Router2.X多种路由实现方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue3中使用ref标签对组件进行操作方法

    Vue3中使用ref标签对组件进行操作方法

    这篇文章主要介绍了Vue3中使用ref标签对组件进行操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论