Vue中使用http库的常用方法

Vue中使用http库可以帮助开发者更好地管理http请求，提高开发效率。下面介绍：

1、使用axios发起http请求

axios是一个基于Promise的HTTP客户端，可以用来发起http请求。使用axios发起http请求需要安装axios，在需要发起http请求的组件中引入axios：

import axios from 'axios'

就可以使用axios发起http请求了，例如发起get请求：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

也可以使用axios发起post请求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、使用vue-resource发起http请求

vue-resource是Vue.js官方提供的一个插件，可以用来发起http请求。使用vue-resource发起http请求需要先安装vue-resource，在需要发起http请求的组件中引入vue-resource：

import VueResource from 'vue-resource'

就可以使用vue-resource发起http请求了，例如发起get请求：

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

也可以使用vue-resource发起post请求：

this.$http.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(response => {
    console.log(response);
}, response => {
    console.log(response);
});

3、使用fetch发起http请求

fetch是一个基于Promise的API，可以用来发起http请求。使用fetch发起http请求，需要先安装fetch，在需要发起http请求的组件中引入fetch：

import fetch from 'fetch'

就可以使用fetch发起http请求了，例如发起get请求：

fetch('/user?ID=12345')
  .then(function(response) {
    console.log(response);
  })
  .catch(function(err) {
    console.log(err);
  });

也可以使用fetch发起post请求：

fetch('/user', {
    method: 'POST',
    body: JSON.stringify({
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function(err) {
    console.log(err);
  });

4、使用superagent发起http请求

superagent是一个简洁的、易读的、功能强大的HTTP客户端，可以用来发起http请求。使用superagent发起http请求需要先安装superagent，在需要发起http请求的组件中引入superagent：

import request from 'superagent'

就可以使用superagent发起http请求了，例如发起get请求：

request
  .get('/user?ID=12345')
  .end(function(err, res){
    console.log(res);
  });

也可以使用superagent发起post请求：

request
  .post('/user')
  .send({
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .end(function(err, res){
    console.log(res);
  });

以上就是，使用上述方法可以帮助开发者更好地管理http请求，提高开发效率。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。