vue中axios配置get请求body传参数

原创

mob649e815f494b 2024-01-11 06:43:09 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815f494b的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue中使用Axios配置GET请求传递参数的方法

在Vue项目中，经常会用到Axios来进行网络请求。GET请求是最常见的一种请求方式，而有时我们需要在GET请求中传递一些参数，比如搜索功能中的关键字。本文将介绍如何在Vue中使用Axios配置GET请求传递参数的方法，并提供相应的代码示例。

Axios简介

Axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。它具有以下特点：

支持浏览器和Node.js环境
支持Promise API
支持拦截请求和响应
支持取消请求
支持自动转换JSON数据
支持客户端和服务器端的CSRF保护

Axios已经成为了Vue框架中最常用的网络请求工具之一。

GET请求传递参数的方式

GET请求传递参数有多种方式，比如使用URL的查询字符串、使用请求头、使用请求体等。在Vue中使用Axios发送GET请求时，通常会使用URL的查询字符串方式来传递参数。下面是一个使用Axios发送GET请求的代码示例：

import axios from 'axios';

axios.get('/api/user', {
  params: {
    id: 1,
    name: 'John'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

在上面的代码示例中，我们调用了Axios的get方法来发送GET请求。第一个参数是请求的URL，第二个参数是一个配置对象。在配置对象中，我们可以使用params字段来传递参数。在这个例子中，我们传递了两个参数id和name，它们的值分别为1和'John'。Axios会自动将这些参数拼接到URL的查询字符串中。

在Vue中配置Axios的GET请求

在Vue项目中，我们通常会将Axios的配置提取到一个单独的文件中，以便在整个项目中复用。下面是一个Vue项目中配置Axios的示例：

// api.js
import axios from 'axios';

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000
});

export function getUser(id, name) {
  return instance.get('/user', {
    params: {
      id,
      name
    }
  });
}

在上面的代码示例中，我们创建了一个名为instance的Axios实例，并配置了基础URL和超时时间。然后，我们定义了一个名为getUser的函数，它发送一个GET请求到/api/user接口，并传递了两个参数id和name。最后，我们使用export关键字将getUser函数导出，以便在其他地方使用。

在Vue组件中使用getUser函数时，只需要引入api.js文件，并调用getUser函数即可：

// User.vue
import { getUser } from './api';

export default {
  mounted() {
    getUser(1, 'John')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}