vue中axios处理http发送请求的示例（Post和get）

Vue中的Axios处理HTTP请求示例详解（Post与Get）

随着技术的发展，越来越多的前端开发者选择使用Vue框架来构建用户界面。在处理HTTP请求方面，axios已成为Vue项目中的首选库。本文将详细介绍如何使用axios在Vue中进行HTTP请求的发送，包括Post和Get请求。

一、安装与引入axios

你需要安装axios库。你可以使用npm或yarn进行安装。如果你的项目还没有安装npm或yarn，请先安装它们。在终端中输入以下命令来安装axios：

npm install axios --save 或 yarn add axios

然后，在你的Vue组件中引入axios库。你可以使用以下代码来引入axios：

import axios from 'axios';

二、基本使用方法

1. Get请求示例：

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response); // 打印服务器响应数据

})

.catch(function (error) {

console.log(error); // 打印错误信息

});

你也可以使用另一种方式发送get请求，将参数放在配置对象中：

axios.get('/user', {params: {ID: 12345}})

.then(function (response) {

console.log(response); // 打印服务器响应数据

})

.catch(function (error) {

console.log(error); // 打印错误信息

});

2. Post请求示例：

axios.post('/user', {firstName: 'Fred', lastName: 'Flintstone'})

.then(function (response) {

console.log(response); // 打印服务器响应数据

})

.catch(function (error) {

console.log(error); // 打印错误信息

在前端开发中，与服务器交互的常用方式是发送HTTP请求。axios和jQuery的ajax都是常见的请求工具。它们各有特点，但在某些情况下，选择哪种方式更好呢？让我们来一下。

axios默认使用application/json格式的数据，如果不使用qs.stringify进行数据转换，即使设置了请求头的内容类型为json，依然会保持默认格式。这样的设计有其优势，但也意味着在某些情况下可能需要额外的配置。

对于POST请求，我们可以使用jQuery的ajax方法来实现。它的实现方式相对简洁明了，数据格式默认为application/x-www-form-urlencoded，这在某些场景下会更加方便。比如下面的代码示例：

```javascript

$.ajax({

url: 'api/bbg/goods/get_goods_list_wechat',

data: {

'data': JSON.stringify({

"isSingle": 1,

"sbid": 13729792,

"catalog3": 45908012,

"offset": 0,

"pageSize": 25

})

},

// ...其他配置

});

```

即使两个请求都成功了，它们返回的结果可能会有所不同。jQuery的ajax返回的是实际的数据，而axios返回的结果则包括了一些额外的信息，如config、headers等。对于GET请求，我会更倾向于使用axios.get()的形式。它清晰明了，易于理解。例如：

```javascript

axios.get('/bbg/shop/get_classify', {

params: {

sid: 13729792

},

headers: {

"BBG-Key": "ab9ef204-3253-49d4-b229-32383480a6"

}

})

.then(function (response) {

// 处理响应数据...

})

.catch(function (error) {

// 处理错误...

});