问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在Vue中使用axios发送GET和POST请求？

头像
前端刘班班
    1
    新手上路，请多包涵

    大标题在vue中如何使用axios发送get和post请求

    axios的官网教程有点难理解，网上的教程也各不一样

    如何简单编写get和post请求

    vue.jsaxios
    阅读 1.7k
    avatarAI BotBETA

    在Vue中使用axios发送GET和POST请求是相对直接的。首先，确保你已经安装了axios。如果还没有安装，你可以通过npm或yarn来安装它：

    npm install axios
# 或者
yarn add axios

    发送GET请求

    在Vue组件中，你可以这样使用axios发送GET请求：

    <template>
  <div>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
// 引入axios
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          // 处理成功情况
          console.log(response.data);
        })
        .catch(error => {
          // 处理错误情况
          console.error("There was an error!", error);
        });
    }
  }
}
</script>

    发送POST请求

    发送POST请求时，你通常会想要发送一些数据到服务器。你可以像这样使用axios：

    <template>
  <div>
    <button @click="postData">发送数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    postData() {
      const data = {
        key: 'value'
      };

      axios.post('https://api.example.com/data', data)
        .then(response => {
          // 处理成功情况
          console.log(response.data);
        })
        .catch(error => {
          // 处理错误情况
          console.error("There was an error!", error);
        });
    }
  }
}
</script>

    注意事项

    • 替换'https://api.example.com/data'为你的实际API端点。
    • 在.then()中处理你的响应数据。
    • 在.catch()中处理请求过程中可能发生的任何错误。
    • 你可以根据需要添加请求的配置选项，如headers，通过向axios.get()或axios.post()传递第二个参数。
    • Vue组件的methods部分用于定义在模板中可以通过@click等指令调用的方法。

    这样，你就可以在Vue中简单地使用axios来发送GET和POST请求了。

    2 个回答
    得票最新
    头像
    hfhan
      28.9k72241

      你可以使用axios.get(url[, config])和axios.post(url[, data[, config]])快速发起get和post请求。

      也可以直接使用axios(config)发起请求，请求的方法在config中的method进行明确。

      config请求配置的具体属性参考请求配置

      上面是直接使用，如果需要做全局配置，和请求/响应拦截，需要使用axios.create([config])创建实例，再用创建的实例进行请求，比如

      axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 50000
})

// request拦截器
service.interceptors.request.use(config => {
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  // console.log(res.data);
    return res.data
},
  error => {
    console.log('err' + error)
    return Promise.reject(error)
  }
)

export default service

      使用方法就是把axios换成这个实例service

      service.get(url[, config])
service.post(url[, data[, config]])
service(config)
      头像头饰
      陟上晴明
        21.1k124691

        一般自己实现就是如同 hfhan 说的这样。可以直接使用，也可以封装一个 request.js 的文件来实例化 axios 然后配置全局拦截器。

        具体实际使用上区别就是对于API维护方式的不同。

        有一些人喜欢把所有的接口都放到一个文件里面，维护一个超大的 api.js 文件，然后在需要发起请求的文件中 import $api from '@api' 后使用 $api.getUserInfo() 这样来调用接口。
        有一些人则喜欢拆分开只在需要的地方引入需要的接口请求（import { getUserInfo } from '@api/user.js'）

        国内环境下大部分人的工作内容都是“xxx管理后台”，所以使用比较多的情况是拆分开的，

        并且这些声明接口的js文件大多数情况下都可以通过后端的代码生成器直接生成。前端只需要把生成的文件放到指定目录，然后在业务里面使用就好了。

        参考项目1

        参考项目2

        查看全部 2 个回答
        推荐问题
        宣传栏