vue中axios的使用

全栈程序员-站长 • 2025年9月29日下午1:15 • 未分类 • 阅读 2

vue中axios的使用

1、选择什么网络模块
2、JSONP
3、axios的请求方式
4、axios框架的基本使用
5、axios发送并发请求
6、axios的配置
- 6.1、全局配置
- 6.2、常见的配置选项

1、选择什么网络模块

在这里插入图片描述

2、JSONP

在这里插入图片描述

3、axios的请求方式

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); }))