5.axios框架的基本使用

axios框架支持多种请求方式向服务器发送请求数据。

tips: axios(config)默认发送的是get请求。

安装axios框架：
npm i axios -S

axios的基本使用步骤如下：

httpbin.org 这个网站能测试 HTTP 请求和响应的各种信息，比如 cookie、ip、headers 和登录验证等，且支持 GET、POST 等多种方法，对 web 开发和测试很有帮助（但因为是国外的，加载很慢。）。

测试用的API接口
http://123.207.32.32:8000/home/multidata
http://123.207.32.32:8000/home/data?type=sell&page=3

axios发送请求

还可以这样写：

axios发送get请求，没有携带参数的方式

axios发送get请求，携带参数的方式

axios发送并发请求

拿到的是个数组

axios发送并发请求的axios.spread()方法的使用

拓展：

axios的全局配置

• 在实际开发中，axios并发请求里面有很多参数都是固定的，例如我们上面的baseURL的前半段都是固定不变的，这个时候我们可以进行一些抽取，此外还有双方共同的拥有的属性也可以进行抽取（例如设置超时时间的属性timeout），这时候我们想要抽取，就用到了axios的全局配置，我们要抽取的就是公共的请求配置。

  
  
  

  但我们发现baseURL大家都有，所以还可以继续抽离。

  
  

常见的axios配置选项信息

• 请求地址
  url: 'www.baidu.com'
• 请求类型
  method: 'get'
  method: 'post'
• URL查询对象
  params: {id: 12}
  还有query的写法
• request body（请求体）
  data: {key: 'aa'}
• 请求根路径
  baseURL: 'http://www.baidu.com'
• 超时时间设置
  timeout: 1000
• 跨域是否带Token
  withCredentials: false
• 自定义请求头
  headers:{'X-Requested-With':'XMLHttpRequest'}

get请求对应的是URL查询对象
post请求对应的是请求体