请用node.js 封装get,post请求,传参url,及data,设置cookie,然后在前端vuejs调用
时间: 2024-03-29 20:38:10 浏览: 61
vue中封装的信息提示和请求js
好的,我可以为您提供一个简单的示例代码。首先,我们需要安装 `request` 和 `request-promise` 这两个库,可以使用以下命令进行安装:
```
npm install request request-promise
```
然后,我们可以创建一个名为 `requestUtil.js` 的文件,包含以下代码:
```javascript
const request = require('request');
const rp = require('request-promise');
// GET 请求
async function get(url, cookie = '') {
const options = {
url,
headers: {
Cookie: cookie,
},
json: true,
};
return rp(options);
}
// POST 请求
async function post(url, data, cookie = '') {
const options = {
url,
method: 'POST',
headers: {
Cookie: cookie,
},
body: data,
json: true,
};
return rp(options);
}
module.exports = {
get,
post,
};
```
这里我们导出了两个函数 `get` 和 `post`,分别用于发送 GET 和 POST 请求。这两个函数都接受三个参数:`url`、`data` 和 `cookie`。其中,`url` 表示请求的地址,`data` 表示 POST 请求发送的数据,`cookie` 表示请求需要携带的 Cookie。
接下来,我们可以在前端的 Vue.js 代码中调用这两个函数,示例代码如下:
```javascript
<template>
<div>
<button @click="handleClickGet">发送 GET 请求</button>
<button @click="handleClickPost">发送 POST 请求</button>
</div>
</template>
<script>
import { get, post } from './requestUtil';
export default {
methods: {
async handleClickGet() {
try {
const result = await get('https://api.github.com/users/octocat');
console.log(result);
} catch (err) {
console.error(err);
}
},
async handleClickPost() {
try {
const result = await post('https://httpbin.org/post', { name: 'Alice', age: 18 });
console.log(result);
} catch (err) {
console.error(err);
}
},
},
};
</script>
```
以上代码中,我们引入了 `requestUtil.js` 中导出的 `get` 和 `post` 函数,并在 Vue.js 实例的方法中调用。在调用函数时,我们可以传入相应的参数,例如发送 GET 请求时,我们可以传入 `https://api.github.com/users/octocat` 作为请求地址。发送 POST 请求时,我们可以传入 `https://httpbin.org/post` 作为请求地址,并传入一个包含 `name` 和 `age` 字段的对象作为请求数据。
需要注意的是,由于 `get` 和 `post` 函数都是异步函数,因此我们需要使用 `async/await` 或者 `.then()` 方法来处理返回的结果。在请求过程中,如果出现错误,我们可以通过 `try/catch` 语句或者 `.catch()` 方法来捕获并处理异常。
希望这个示例代码能够帮助您实现您的需求。
阅读全文