npm 包 vue-superagent 使用教程

什么是vue-superagent

vue-superagent是一个基于superagent的vue插件，能够帮助我们在vue项目中更加方便地进行http请求。它可以轻松地在Vue组件中使用，并支持Promise API。

下面我们来具体了解一下如何使用它。

安装

首先，我们需要通过npm安装vue-superagent插件：

npm install vue-superagent --save

引入依赖

接下来，在main.js中引入vue-superagent和Vue：

import Vue from 'vue'
import VueSuperagent from 'vue-superagent'
 
Vue.use(VueSuperagent)

发起请求

现在我们已经准备好开始发起请求了！我们可以使用Vue组件中的this.$http()方法发起请求：

this.$http.get('/user').then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

上面的代码会向后端发送一个GET请求，并在请求成功或失败时输出响应到控制台。

我们也可以使用链式调用发起多个请求：

this.$http.get('/user').then(response => {
  console.log(response.body);
  return this.$http.get('/user/friends');
}).then(response => {
  console.log(response.body);
});

上述代码会向后端发起两个GET请求，并按顺序输出响应到控制台。

POST请求

如果需要发送POST请求，可以使用this.$http.post()方法：

this.$http.post('/user', { name: 'John', age: 20 }).then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

上述代码会把{name: 'John', age: 20}发送给后端，后端返回响应后输出到控制台。

PUT请求

如果需要发送PUT请求，可以使用this.$http.put()方法：

this.$http.put('/user/1', { name: 'John', age: 21 }).then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

上述代码将更新ID为1的用户的姓名和年龄。

DELETE请求

如果需要发送DELETE请求，可以使用this.$http.delete()方法：

this.$http.delete('/user/1').then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

上述代码将删除ID为1的用户。

设置请求头

有时我们需要设置自定义请求头。这可以通过在请求中添加headers选项实现：

this.$http.get('/user', { headers: { Authorization: 'Bearer ' + token } }).then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

上述代码会发送一个带有Authorization头的GET请求。

请求数据类型

默认情况下，Vue-Superagent会自动根据请求数据的类型设置Content-Type头。如果需要手动设置它，可以通过Content-Type选项实现：

this.$http.post('/user', { name: 'John' }, { headers: { 'Content-Type': 'application/json' } }).then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

上述代码会发送一个带有application/json的POST请求。

结束语

以上便是关于如何使用vue-superagent的详细介绍。使用这个插件可以极大地简化我们在Vue项目中的http请求，并提高我们的开发效率。希望这篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553fc81e8991b448d1557