axios

一、axios

1.1、简介

• 一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
• 在浏览器环境中使用 XMLHttpRequest 对象，Node 中使用 http 模块。
• vue 作者不再继续维护 vue-resource，并推荐大家使用 axios。

1.2、入门

在浏览器环境中导入库，然后使用库暴露的全局变量 axios 发送请求

get请求

• 函数调用会返回一个Promise实例，通过 then 或 catch 添加成功失败回调
• 成功回调接收一个response对象，要拿到请求回来的数据，需要通过 respone.data 来取

// 得到一个 Promise 实例, 通过 then 或 catch 添加成功失败回调
axios.get('http://vue.studyit.io/api/getprodlist')  
// 得到response对象, 通过data属性拿数据
.then((rep) => console.log(rep.data))    
// 得到错误描述对象
.catch((err) => console.log(err))

1.3、语法

axios(config)

// 与 jQ 的 ajax 方法类似
axios({
    url: '',
    method: 'post',
    data: {}
}).then()

axios.method( )

// 与 jQ 的 get、post 方法类似
axios.get(url, config)
axios.post(url, data, config)
axios.delete(url, config)
axios.head(url, config)
axios.put(url, data, config)
axios.patch(url, data, config)

特点

• 可以拦截请求与响应，或取消请求，或进行统一的请求配置与处理

1.4、使用

get请求

let config = {
    params: { pageindex: 1 }
};
axios.get('/news/list', config)
    .then(rep => {
        console.log(rep.data);
    });

post请求

let data = {
    user_name: 'self',
    user_pwd: 111111
};
axios.post('/login', data)
    .then(rep => {
        console.log(rep.obj);
    });

默认配置

let config = {
  url:'/user',
  method:'get' //default
  baseURL:'https://some-domain.com/api/',
  transformRequest:[function(data){}],
  headers: {'X-Requested-With':'XMLHttpRequest'},
  params: {
    ID:12345
  },
  ...
};
axios.defaults = Object.as