vue中axios的使用详解

更新时间：2022年03月17日 16:07:23 作者：小码哥呀

这篇文章主要为大家详细介绍了vue中axios的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1、选择什么网络模块

在这里插入图片描述

2、JSONP

在这里插入图片描述

3、axios的请求方式

网络请求模拟：http://httpbin.org/

在这里插入图片描述

4、axios框架的基本使用

1、新建vue项目

vue init webpack learnaxios

2、安装axios依赖

npm install axiox@0.18.0 --save

3、编写代码

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
axios({
  url:'http://123.207.32.32:8000/home/multidata'
}).then(res=>{
  console.log(res);
})
axios({
  url:'http://123.207.32.32:8000/home/data',
  // 专门针对于get请求的参数拼接
  params:{
    type: 'pop',
    page: 3
  }
}).then(res=>{
  console.log(res)
})

在这里插入图片描述

4、请求结果

在这里插入图片描述

5、axios发送并发请求

在这里插入图片描述

方式1：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
// axios发送并发请求
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:5
  }
})]).then(response=>{
  console.log(response);
})

在这里插入图片描述

方式2

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
// axios发送并发请求
// 方式2
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:5
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

在这里插入图片描述

6、axios的配置

6.1、全局配置

在这里插入图片描述

6.2、常见的配置选项

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

Vue+Echarts实现基本K线图的绘制
这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现基本K线图的绘制，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
vue中父子组件注意事项,传值及slot应用技巧
这篇文章主要介绍了vue中父子组件注意事项,传值及slot应用技巧,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
vue实现页面添加水印效果
这篇文章主要为大家详细介绍了vue实现页面添加水印效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue中注册全局组件的三种方式
这篇文章主要介绍了Vue中注册全局组件的三种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
vue自定义filters过滤器
这篇文章主要介绍了vue自定义filters过滤器的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-04-04
实现一个 Vue 吸顶锚点组件方法
这篇文章主要介绍了实现一个 Vue 吸顶锚点组件方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
vue项目中mock.js的使用及基本用法
mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。这篇文章主要介绍了vue项目中mock.js的使用,需要的朋友可以参考下
2019-05-05
在vue中封装方法以及多处引用该方法详解
这篇文章主要介绍了在vue中封装方法以及多处引用该方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
浅谈vue中的data与_data的关系是什么
在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下
2023-12-12
vue使用Vue.extend方法仿写个loading加载中效果实例
在vue中提供v-loading命令,用于div的loading加载,下面这篇文章主要给大家介绍了关于vue使用Vue.extend方法仿写个loading加载中效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06