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请求对应的是请求体

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。