Vue3（撩课学院）笔记09-axios简介，发起get请求的两种方式，发起带参的get及post请求，发起并发请求，并发请求结果将数组展开，axios全局配置，axios配置及封装，请求和响应拦截

最新推荐文章于 2024-07-03 08:00:00 发布
最新推荐文章于 2024-07-03 08:00:00 发布
阅读量1.3k 收藏 5
点赞数
分类专栏： Vue 文章标签： ajax node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/120097659
版权
本文详细介绍了axios在网络请求中的应用，包括发起get和post请求的两种方式，带参数的请求，并发请求的实现，全局配置，以及如何进行请求和响应的拦截。此外，还展示了如何对axios进行封装，创建一个通用的http服务，并在实际应用中使用这个封装后的服务进行并发请求。
摘要由CSDN通过智能技术生成
1、axios简介

axios是基于promise可以用于浏览器和node.js的网络请求库，在服务器端使用原生node.js，在浏览气短使用ajax（即XMLHttpRequests）

2、axios发起get请求

撩课提供的api接口地址：
http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    const getReq=()=>{
      //发起get请求
      axios.get('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001').then((res)=>{
          console.log(res.data)
        }
      ).catch((err)=>{
        console.log(err)
      })
    }

    return {
      getReq,
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
3、axios发起get请求的第二种方法

使用axios进行封装

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    const getReq=()=>{
      axios({
        method:'get',
	url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',

      }).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })
    }

    return {
      getReq,
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
4、axios发起带参数的get请求，及带参的post请求

要看注释

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
    <h1>axios-发起post请求</h1>
    <button @click="postReq()">发起get请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    const getReq=()=>{
      //发起get请求
      axios.get(
        'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        {
          params: {
            id:'lk001',
            name:'like',
            age:10
          }
        }
      ).then((res)=>{
          console.log(res.data)
        }
      ).catch((err)=>{
        console.log(err)
      })

      // axios({
      //   method:'get',
      //   url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
      //   //传入参数
      //     params:{
      //       id:'lk001',
      //       name:'like',
      //       age:10
      //     }
      //
      // }).then((res)=>{
      //   console.log(res.data)
      // }).catch((err)=>{
      //   console.log(err)
      // })
    }
    const postReq=()=>{
      //发起post请求
      // axios.post(
      //   'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
      //   {//post请求的参数使用data
      //     data: {
      //       id:'lk001',
      //       name:'like',
      //       age:10
      //     }
      //   }
      // ).then((res)=>{
      //     console.log(res.data)
      //   }
      // ).catch((err)=>{
      //   console.log(err)
      // })

      //使用post请求传参
      axios({
        method:'post',
        url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        //传入参数,post请求使用data
          data:{
            id:'lk001',
            name:'like',
            age:10
          }

      }).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })

    }
    return {
      getReq,
      postReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
5、axios.all发起并发请求

使用axios.all发起并发请求，并通过axios.spread将数组的值展开
测试api接口，共两个
http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001
http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002

请求是放在数组里的

<template>
  <div>
    <h1>axios-发起并发请求</h1>
    <button @click="allReq()">发起并发请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){

    const allReq=()=>{
    //请求是放在数组里的
      axios.all([
        //get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001'}),
        //另一个get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002'}),
      ]).then((res)=>{
        console.log(res)
      }).catch((err)=>{
        console.log(err)
      })
    }
    return {
      allReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
6、axios.all发起并发请求并通过axios.spread将数组的值展开
<template>
  <div>
    <h1>axios-发起并发请求</h1>
    <button @click="allReq()">发起并发请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){

    const allReq=()=>{
      axios.all([
        //get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001'}),
        //另一个get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002'}),
      ]).then(//使用axios.spread展开结果集数组,spread里的回调函数里面有两个参数
          axios.spread((res1,res2)=>{
            console.log(res1.data)
            console.log(res2.data)
          })
      ).catch((err)=>{
        console.log(err)
      })
    }
    return {
      allReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
7、axios配置
<template>
  <div>
    <h1>axios-发起并发请求</h1>
    <button @click="allReq()">发起并发请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    //axios的全局配置
    axios.defaults.baseURL='http://demo.itlike.com/web/xlmc/api/'
    axios.defaults.timeout=5000//毫秒
    const allReq=()=>{
      axios.all([
        //get请求
        axios({url:'homeApi/categoriesdetail/lk001'}),
        //另一个get请求
        axios({url:'homeApi/categoriesdetail/lk002'}),
      ]).then(//使用axios.spread展开结果集数组,spread里的回调函数里面有两个参数
          axios.spread((res1,res2)=>{
            console.log(res1.data)
            console.log(res2.data)
          })
      ).catch((err)=>{
        console.log(err)
      })
    }
    return {
      allReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
8、axios封装

创建封装文件:src/http/index.js
src/http/index.js

import axios from 'axios'
//axios的全局配置
axios.defaults.baseURL='http://demo.itlike.com/web/xlmc/api/'
axios.defaults.timeout=5000//毫秒
//包装一个函数
export  default function ajax(url='',params={},type='get') {
  return new Promise((resolve,reject)=>{//promise已经调用立即执行
    //1、创建一个变量
    let promise
    //2、判断请求类型
    if (type.toUpperCase()==='GET'){//如果是get请求
      promise=axios({
        url,
        params,
      })
    }else if(type.toUpperCase()==='POST'){//如果是post请求
      promise=axios({
        url,
        data:params,
        method:'POST',
      })
    }

    //3、处理返回
    promise.then((res)=>{
      resolve(res)
    }).catch((err)=>{
      reject(err)
    })
  })
}

App.vue

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
    <h1>axios-发起带参get请求</h1>
    <button @click="getReqParam()">发起带参get请求</button>
    <h1>axios-发起post请求</h1>
    <button @click="postReq()">发起post带参请求</button>
    <h1>axios-发起并发请求</h1>
    <button @click="postReqall()">发起并发请求</button>
  </div>
</template>

<script >
import ajax from  './http/index.js'
export  default {
  setup(){
    //发起get请求
    const getReq=()=>{
      ajax('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001').then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })

    }
    const getReqParam=()=>{
      //发起带参get请求
      ajax(
        'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        {
          id:'lk001',
          name:'like',
          age:10
        }
      ).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })
    }

    //使用post请求传参
    const postReq=()=>{
      ajax(
        'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        {
          id:'lk001',
          name:'like',
          age:10
        },
        'POST'
      ).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })

    }

    const postReqall=()=>{
      Promise.all([
        ajax('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001'),
        ajax('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002')
      ]).then((res)=>{
        console.log(res)
      })

    }

    return {
      getReq,
      getReqParam,
      postReq,
      postReqall
    }

  }
}
</script>

<style>
/*引入样式*/

</style>
9、请求和响应拦截

在src/http/index.js封装文件上添加请求和响应拦截配置

import axios from 'axios'
//axios的全局配置
axios.defaults.baseURL='http://demo.itlike.com/web/xlmc/api/'
axios.defaults.timeout=5000//毫秒

//请求拦截
//axios配置拦截
axios.interceptors.request.use(
  //拦截成功
  (config)=>{
    //在请求中添加一些数据
    config.abc='hello world'
    //console.log(config)
  //如果不拦截，就要再返回出去这个config
    return config
  },
  //拦截失败
  (err)=>{
    return Promise.error(err)
  }
)

//响应拦截
//axios配置拦截
axios.interceptors.response.use(
  //拦截成功
  (response)=>{
    console.log(response)
    //如果不拦截，就要再返回出去这个config
    return response.data
  },
  //拦截失败
  (err)=>{
    return Promise.error(err)
  }
)


//包装一个函数
export  default function ajax(url='',params={},type='get') {
  return new Promise((resolve,reject)=>{//promise已经调用立即执行
    //1、创建一个变量
    let promise
    //2、判断请求类型
    if (type.toUpperCase()==='GET'){//如果是get请求
      promise=axios({
        url,
        params,
      })
    }else if(type.toUpperCase()==='POST'){//如果是post请求
      promise=axios({
        url,
        data:params,
        method:'POST',
      })
    }

    //3、处理返回
    promise.then((res)=>{
      resolve(res)
    }).catch((err)=>{
      reject(err)
    })
  })
}
心湖中的石子
关注
专栏目录
Vue3通过axios发起get、post请求以及对应的springboot后端接收方式
sebeefe的博客
07-31 7619
这周在做一个小型的前后端分离的会议系统，前端使用的是Vue3，后端使用的是Springboot。原本以为前后端交互很简单，直接发送数据就可以了，没想到遇到了很多问题，具体说来就是1、get和post请求应该如何向后端传递参数；2、前端请求体中参数的存储有哪几种格式，对于不同的存储方式后端应该如何去接收；3、http报文头的到底有什么作用；4、字符集的编码应该如何指定；接下来就让我们逐个来解决这些问题吧！注意如果发送get请求，直接传入普通的js对象即可，axios会自动处理使得后端可以通过。...
vue3 使用axios get方式使用
m0_73481765的博客
07-25 1575
注意：在使用Axios发送请求时，请求路径必须是一个有效的URL地址。在开发环境中，可能需要使用代理设置来处理跨域请求。可以阅读Axios官方文档来了解更多信息。是一个异步函数，使用了async/await语法来处理Axios的Promise响应数据。方法用于发送GET请求，并且使用Promise处理响应数据。属性将包含响应数据。如果请求失败，错误将被传递到。属性将包含响应数据。如果请求失败，错误将被传递到。
vue3.0(十六)axios详解以及完整封装方法
最新发布
chengcheng9876的博客
07-03 7780
axios详解以及完整封装方法
vue3里的axios（get,post）
2301_76423183的博客
12-29 910
将下面代码加入入口文件main.js文件。3.使用index.vue。
vue-cli 4+axios+代理+封装 案例代码分享
菜鸟小筑
02-18 4566
引言：笔者为前端小白，本文乃笔者初学axios，参考无数资料写下Demo的代码分享，介于网上资料虽然多但是大多需要不断尝试才能验证真伪，本文代码皆是笔者验证可行的代码，希望能给同是小白的小伙伴带来一点便利（拿去拿去，不用客气～ ^!^） 项目背景：前端框架是Vue-cli4.0，http请求处理使用axios，后端java/数据库Mysql（小伙伴友情协助，此处点36个赞！） 方案一：axio...
vue3中，axios的几种用法之抽离接口、post请求、get请求、.env.dev、网关标识、基准地址
weixin_44867717的博客
03-28 1438
【代码】vue3中，axios的几种用法之抽离接口、post请求、get请求、.env.dev、网关标识、基准地址。
vue3知识点6Vuecli3 axios通信:get请求|post请求(已封装)
yangyangdt的博客
01-04 5674
vue中axios通信全部用法：get传参数，一个或多个，post传参数，数组参数，对象参数，多个参数，二维数组，qs库用法，已封装。
vue3+cli4.5知识点6axios通信:get请求|post请求(已封装)
yangyangdt的博客
01-08 1922
vuecli4.5中没有了Vue实例对象，只有一个createapp，怎么像以前的版本一样引入axios呢？本文详解。内含封装代码。
vue第四天笔记02——axios请求中的例子
08-21
本篇笔记将深入探讨如何在Vue项目中使用axios进行API请求，同时结合实例——模仿王者荣耀官网的选项卡功能，来具体展示axios的应用。 首先，我们要了解axios的基本用法。axios是一个基于Promise的HTTP库，可以在...
axios 配置loading_vue axios配置 发起请求加载loading请求结束关闭loading
weixin_34704521的博客
12-24 3376
axios带有请求拦截器，避免在每个请求里面加loading重复操作，可以封装进去，在请求开始时加载loading层，请求结束关闭，loading层用vux的loading加载axios.jsimport axios from 'axios'import Vue from 'vue'// 超时时间axios.defaults.timeout = 15000;// axios.defaults.wi...
详解Vue 2.0封装axios笔记
08-30
axios快速使用：axios是Vue 2.0官方推荐的Ajax插件库，通过npm安装后可以快速使用，axios提供了多种请求方法，如get、post、put、delete等。使用axios可以轻松地与后端进行交互。 常见用法：axios的常见用法包括get...
在vue-cli3中使用axios获取本地json操作
11-19
在vue-cli3中，公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取，不能用post，不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console.log(data) }) 补充知识：两个不同的路由，引入相同的组件 从不同的按钮进入到详情页,两个不同的路由,相同的组件 主要是从不同按钮进入不同路由的页面,内容一致,但是title不一样,怎么写 index.js const busines
VUE3 使用axios网络请求
LQ_001的博客
03-09 2425
不管何种引用，都要在工程中安装 axios 包。结果如下图，四种方式均同样请求到数据。结果如下图，四种方式均请求到数据。文件中，axios挂载到全局。其次，在布局文件里面去掉。
《Vue3实战》第十一章 Axios，Vue里使用get、post请求
Java 技术专栏，从入门到精通，熟悉企业级开发
07-02 3047
使用Vue里的Axios，调用了get、post请求，已经4种后端跨域配置。
Vue中axios学习（一）axios中get、post请求方式
qq_42732038的博客
11-24 3174
一、axios是基于promise对ajax的一种封装 二、axios的基本使用 1.使用默认方式发送请求，get <script src="../axios/axios.min.js"></script> <script> axios({ //默认是get请求 url:'http://localhost:9999/student/student/getAllSyude...
Vue3【Axios网络请求（GET、POST 、并发请求、全局配置 ）】(八)-全面详解（学习总结---从入门到深化）
03-29 1087
Vue3【Axios网络请求（GET、POST 、并发请求、全局配置 ）】(八)-全面详解（学习总结---从入门到深化）
vue引入axios发起get和post请求
weixin_42667972的博客
08-21 1181
简单介绍contentType在application/x-www-form-urlencoded和application/json的情况下，前端如何传参和java后端如何接受参数
Vue3开发 axios的用法
m0_51179717的博客
12-26 2082
如何使用axios发送网络请求
掌握Vue三种数据请求方式：vue-resource、axios与fetch-jsonp
本文将详细介绍Vue.js中请求数据的三种常见方式，分别是官方推荐的vue-resource插件、流行的axios库以及fetch-jsonp。首先，我们将关注vue-resource，它是由Vue团队官方提供的一个轻量级的HTTP客户端，用于简化前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值