1.什么是axios
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
实质上返回一个promise对象,常使用ascync和await来操作获取数据
await返回的promise对象里面的值
使用原生ajax发送get请求
const xhr=new XMLHttpRequest()
xhr.open('get','http://127.0.0.1:8080/posts')
xhr.send()
xhr.onreadystatechange()=function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){console.log(xhr.response)}
else{console.log(xhr.status)}
}
}
例1:使用axios发送get请求
import axios from 'axios'
ascync function(){
const response =await axios.get('http://127.0.0.1:8080')
console.log(response)
}
2.安装和使用axios
npm i axios
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
3.使用axios发起get请求
axios(
{method: 'get',
url:'http://127.0.0.1:8080/posts',
}).then(response=>{console.log(response);
})
或者使用封装的API axios.get()如上例1所示
method的默认值为get请求,如果不指定method,则将发送get请求
URL为指定发送请求的服务端地址
因为axios是一个基于promise的请求库,所以其能使用promise中的then和catch方法
axios(
{method: 'get',
url:'http://127.0.0.1:8080/posts',
}).then(response=>{
console.log(response);
}).catch(err=>{console.log(err)})
4.发起post请求
与get请求不同的是post请求需要指定data作为传输的对象
axios.post(
'http://127.0.0.1:8080/posts',
{title:'aimingruzi',
author:'lisang'}
).then(response=>{console.log(response);})
axios(
{ method: 'PSOT',
url:'http://127.0.0.1:8080/posts',
data:{
title:'name',
author:'lisang'
}
}).then(response=>{console.log(response);
}).catch(err=>{console.log(err)})
5.Axios的API
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]])
对于config
// `config` 是 `axios` 请求的配置信息
config: {},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects),
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
axios为http的8种请求方法都封装了各自的API
本文选取了常用的post和get方法的API进行了介绍,其代码在上述例子中
注意
在使用别名方法时, url
、method
、data
这些属性都不必在配置中指定。
6.Axios实例
可以通过create方法自定义配置新建一个实例
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
7.请求配置
Axios在创建请求时可以的配置选项,其中只有url是必须的。
请求配置 | Axios 中文文档 | Axios 中文网 (axios-http.cn)
可以在该文档中查看可用配置
全局 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
例子如下
axios.defaults.method='get'
axios.defaults.baseURL='http://127.0.0.1:8080'
const first=document.querySelector('#first')
first.addEventListener('click',function(){
axios(
{
url:'/posts'
}).then(response=>{
console.log(response);
})
})
可以通过上述方法等一类方法来指定axios的默认参数
8.默认配置
您可以指定默认配置,它将作用于每个请求。
// 创建实例时配置默认值
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
实例如下
const get_name=axios.create({
baseURL:'http://127.0.0.1:8080',
timeout:2000
})
get_name({
url:'posts'
}).then(response=>{console.log(response);})
get_name与axios对象的功能几乎一致
配置的优先级
配置将会按优先级进行合并。它的顺序是:在lib/defaults.js中找到的库默认值,然后是实例的 defaults
属性,最后是请求的 config
参数。后面的优先级要高于前面的。下面有一个例子。
// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();
// 重写库的超时默认值
// 现在,所有使用此实例的请求都将等待2.5秒,然后才会超时
instance.defaults.timeout = 2500;
// 重写此请求的超时时间,因为该请求需要很长时间
instance.get('/longRequest', {
timeout: 5000
});
本文参考axios官方实例,后续内容不定期更新