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利用vuex模拟实现新闻点赞功能实例
本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
el-table-column叠加el-popover使用示例小结
el-table-column有一列展示多个tag信息,实现点击tag展示tag信息以及tag对应的详细信息,本文通过示例代码介绍el-table-column叠加el-popover使用示例小结,感兴趣的朋友跟随小编一起看看吧
2024-04-04
vuex中的state使用及说明
这篇文章主要介绍了vuex中的state使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vuex学习进阶篇之getters的使用教程
getters用于获取state里的数据,它类似于计算属性,如果要获取的数据并没有发生变化的话,就会返回缓存的数据,下面这篇文章主要给大家介绍了关于vuex学习进阶篇之getters的使用教程,需要的朋友可以参考下
2022-10-10
在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解
在一次项目脚手架升级的过程中，将之前基于 webpack 搭建的项目移植到 Vite 构建，这篇文章主要介绍了在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery,需要的朋友可以参考下
2022-12-12
vue中el-table实现无限向下滚动懒加载数据
一次性的加载全部的数据,并且将其渲染到页面上,就会导致页面卡顿,往往采用分页和无限滚动的方式来展示,本文主要介绍了vue中el-table实现无限向下滚动懒加载数据,感兴趣的可以了解一下
2023-12-12
vue element ui使用选择器实现地区选择两种方法
这篇文章主要给大家介绍了关于vue element ui使用选择器实现地区选择的两种方法,Element UI是一套基于Vue.js开发的UI组件库,其中包含了地区选择器(Cascader)组件,需要的朋友可以参考下
2023-09-09
浅谈VUE中演示v-for为什么要加key
这篇文章主要介绍了浅谈VUE中演示v-for为什么要加key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
vue组件中重新渲染的3种方式小结
本文主要介绍了vue组件中重新渲染的3种方式小结,主要包括改变key,v-if,vm.$forceUpdate()这三种,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
Vue实现单行删除与批量删除
这篇文章主要介绍了Vue实现单行删除与批量删除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04