JavaScript HTTP客户端库axios介绍

HTTP客户端是很多时候我们都需要用到的功能，今天就来介绍一个比较流行的JavaScript编写的HTTP客户端库axios。

安装

如果你会使用npm的话，可以使用npm来装，非常方便。

$ npm install axios

如果你准备在浏览器中尝试使用，可以直接使用CDN。

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

快速上手

在使用axios之前，先来介绍一下ES6标准中引入的Promise对象，它是为了方便异步编程而设立的。如果希望详细了解Promise对象的用法，可以查看这里。Promise对象含有then和catch方法，分别用来处理异步操作和抛出异常操作。所以如果一个方法返回Promise对象，我们就可以简单的像这样编写异步操作。

funtionReturnPromise(XXX)
    .then(function (returnValue) {
   
    //异步操作
    })
    .catch(function (error) {
   
    //异常处理
    })

HTTPBIN这个网站可以帮助我们测试HTTP请求， 所以这里使用它作为目标网站。

GET请求

axios.get('http://httpbin.org/get?fuck=shit')
    .then(function (response) {
   
        console.log(response.data)
    })
    .catch(function (error) {
   
        console.log(error)
    })

当然请求参数也可以单独传进去。

axios.get('http://httpbin.org/get', {
    params: {
        fuck: "shit"
    }
})
    .then(function (response) {
   
        console.log(response.data)
    })
    .catch(function (error) {
   
        console.log(error)
    })

POST请求

POST请求的参数只能以参数的形式传入。

axios.post('http://httpbin.org/post', {
    fuck: 'shit',
    son: 'bitch'
})
    .then(function (response) {
   
        console.log(response.data)
    })
    .catch(function (error) {
   
        console.log(error)
    })

API介绍

使用配置发送请求

除了前面显式使用对应方法来发起请求，我们还可以使用配置来设置如何发送请求。例如，要发送一个POST请求，可以这么写。

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

所有请求方法

axios可以发送不同类型的HTTP请求，这些请求方法可以参考下面。

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]])