axios与vue-resource的区别

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在我们使用请求时候，常用的是axios，现在我们来说说一个其他的http的请求模块vue-resource。让我们来看看这两个有什么相同的，有什么不同的

一、特性

1、Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 2、vue-resource是vue的一个http请求模块，vue-resource是Vue.js的一款插件

二、安装

两者都可以使用npm安装或者CDN引入

$ npm install axios 

$ npm install vue-resource

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

三、API实例方法

1、axios

axios#request(config)

axios#get(url[, config])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

2、vue-resource

get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [options])

四、创建请求实例

1、axios

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

2、vue-resource

this.$http.get('/login',{
        params : {
          id:id,
          picType:status
        }
      }).then(res => {
        
      }), (response) => {
      }

五、拦截器

1、axios

// 添加请求拦截器 axios.interceptors.request.use(function (config) {     
// 在发送请求之前做些什么     
return config;   }, 
function (error) {     
// 对请求错误做些什么     
return Promise.reject(error);   });  

// 添加响应拦截器 
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么     
return response;   
}, function (error) {     
// 对响应错误做点什么     
return Promise.reject(error);   });

2、vue-resource

// vue-resource拦截器
Vue.http.interceptors.push((request, next) => {
  request.url = '/ent-code' + request.url
  // request.headers.set('Content-Type','application/json')
  next((response) => {
    return response
  })
})