Axios基础知识&二次配置

撒比玩意
137 阅读2分钟

Axios库就是对于ajax操作的封装，是基于Promise进行管理，实现客户端和服务器之间通信的本质：XMLHttpRequest （1）Axios基础语法：基于axios发送请求，返回结果是一个promise实例：当请求成功，是咧是fulfilled，值是从服务器获取的成功结果；当请求失败，实例是rejected,值是失败的原因！

AXIOS中断Ajax请求

 + 创建一个遥控器[一个控制取消的对象]const source=axios.Canceltoken.source();
 + 把信号器安装在请求上[给请求加一个配置]cancelToken:source.token
 + 只要按下取消按钮就可以停止请求 source.cancel("取消原因")

基于axios发送请求的方法

  • axios([config])核心
  • axios([url],[config])提取请求地址，其余写在config配置项中
  • axios.request([config])和axios一样，所有配置都写在config中
  • axios.get/head/delete/options([url],[config])提取请求方、请求地址，其余写在config配置项中
  • axios.post/put/patch([url],[data],[config])提取请求方、请求地址、请求主体，其余写在config配置项中

CONFIG配置项

  • params:字符串/对象 URL问号传参的配置，如果值是一个对象，Axios内部会把对象中的键值对变为“xxx=xxx&xxx=xxx”的字符串，拼接到URL末尾传递给服务器！
  • Axios内部处理的是时候，只有服务器返回的状态码以2开始的，才被处理为请求成功，其余都认为是请求失败；但是我们可以基于一个配置项进行调整：
validateStatus:function(status){
    //status:服务器返回的HTTP状态码
   return status>=200&&status<300;
  • responseType 预设服务器返回数据类型(把服务器返回结果变为自己指定的类型)
    • json 默认值，把服务器返回的JSON字符串变为对象
    • arraybuffer
    • blob
    • documnet
    • text
    • stream
  • 请求失败的原因
    • CASE1：服务器返回的HTTP状态码没有通过validateStatus的效验，此时reason是个对象
    • config
    • isAxiosError:true
    • request
    • response等同于成功的response对象
    • toJSON
    • message
    • CASE2：请求超时，reason是个对象
    • code："ECONNABRTED"
    • response:undefiend
    • CASE3:请求被中断
    • reason是个对象
    • message存储中断时传递的中断请求原因
    • timeout 设置超时时间，默认是0(不设置)
    • OTHER:剩下情况，都可以认为时"网络出问题了

实例身上的属性

  • response就是从服务器获取的结果它是个对象
  • config存储发送请求时设置的配置项
  • data 存储服务器返回的响应主体信息[默认会把服务器返回的信息变为JSON对象(服务器一般返回的是json字符串)]
  • header 存储服务器返回的响应头信息
  • request 存储原生AJAX创建的XHR实列对象的信息
  • status/statusText 状态码及其描述
avatar
文章
阅读
粉丝