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