简单的axios请求的使用

最新推荐文章于 2024-08-28 18:38:51 发布

勇敢小陈

最新推荐文章于 2024-08-28 18:38:51 发布

阅读量426

点赞数

文章标签： javascript vue.js react.js

本文链接：https://blog.csdn.net/ct5211314/article/details/120906614

版权

本文介绍了如何在Vue和React项目中安装和使用axios进行HTTP请求。通过示例展示了axios的get和post方法，包括参数传递。并提供了简单的Vue组件代码示例，演示了在按钮点击事件中调用axios请求。

摘要由CSDN通过智能技术生成

vue和react官网推荐使用axios请求，会使用axios已经成为项目开发的基本要求了，下面简单的介绍一下如何使用axios进行一个简单的请求，不包含axios的封装，封装过几天发，哈哈哈。

一、axios的安装

yarn add axios
或
npm i axios

二、使用

get请求：axios.get(地址?key=value&key2=value).then(res=>{},err=>{})

多参数展示：axios.get("https://autumnfish.cn/api/joke/list？num=3&aaa="+777+"&bbb=666")

"https://autumnfish.cn/api/joke/list?num=3"+"&bbb="+777

post请求：axios.post(地址,{key:value}).then(res=>{},err=>{})

<template>
  <div class="home">
    <button @click="get">get请求</button>
    <button @click="post">post请求</button>
  </div>
</template>

<script>
import axios from "axios"

export default {

  methods:{
    get(){
      axios.get("https://autumnfish.cn/api/joke/list?num=3").then(res=>{
        console.log(res);
      })
    },
    post(){
        axios.post("https://autumnfish.cn/api/user/reg",{
          username:"小陈"
        }).then(res=>{
          console.log(res);
        })
      }
  }
}
</script>