axios

转自：https://www.jianshu.com/p/f438914a2437

一、说明

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中，API。

• 浏览器中创建XMLHttpRequests
• 从node.js中创建http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

二、安装

npm安装命令：npm i axios
或
使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

万能接口地址：http://jsonplaceholder.typicode.com/users

1、get请求 .then()成功回调，.catch()失败回调。

axios.get('http://jsonplaceholder.typicode.com/users?ID=12345').then(res=> {
      console.log(res)
 })

或者

    axios.get('http://www.xxx.xx',
    {
      params: {
        ID: 12345
      }
    }
    ).then(res=> {
      console.log(res)
    }).catch(function (error) {
      console.log(error);
    });

有headers

axios.get('http://www.xxx.xx?', 
{
  params: {
    name : 'abc',
    sex: 'boy',
  },
  headers: {
    'Accept': 'application/json'
  }
}
).then((res) => {
  console.log(res)
}).catch(function (error) {
  console.log(error);
});

2、post请求 .then()成功回调，.catch()失败回调。

    axios.post('http://jsonplaceholder.typicode.com/users', 
      {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    ).then(function (response) {
      console.log(response);
    }).catch(function (error) {
      console.log(error);
    });

有headers

    axios.post("https://www.xxx.xx?",
      {
        'name' : this.name,
        'factors': this.param_factors,
        'area': this.area
      },
      { 
         headers: { 'Accept': 'application/json'}
      }
    ).then((res)=>{
      console.log(res)  
    }) .catch(function (error) {
      console.log(error);
    });

3、通用请求axios(config)，通过向 axios 传递相关配置config对象来创建请求

    axios({
      method: 'get',
      url: 'http://jsonplaceholder.typicode.com/users'
    }).then(res=>{
      console.log(res)
    })

    axios({
      url: 'http://jsonplaceholder.typicode.com/users',
      methods: 'post',
      data: {
        'name': 'qiurx'
      },
      headers:{
        'Accept': 'application/json'
      }
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })

4、通用请求axios(config) 请求方法别名还有

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])