Axios网络请求

一、axios简单介绍

• 前端ajax框架选型
  • XMLHTTPReuqest
  • jQuery
  • Vue & axios
    • Vue1.x ->vue-resource
    • Vue2.x -> axios
• axios简介及优势
  • 简介
    • 基于Promise
    • 用在浏览器和NodeJS环境
    • 是一个HTTP请求类库
  • 优势
    • 支持从浏览器中创建XMLHttpRequests
    • 支持node.js创建http请求
    • 支持PromiseAPI
    • 支持拦截器、拦截请求和响应
    • 支持转换请求数据和响应数据
    • 自动转换JSON数据
    • 客户端支持防御XSRF攻击

• 支持多种请求方法

  • request(config)
  • get(url[,config])
  • delete(url[,config])
  • head(url[,config])
  • post(url[,data[,config]])
  • put(url[,data[,config]])
  • patch(url[,data[,config]])

    二、axios的基本用法

• 安装使用axios

  • 文件引用方式
  • npm安装方式
  • yarn安装方式
  • 在vue项目中引入axios
• 提供免费的HTTP请求即相应服务网站
  • http://httpbin.org
• 使用axios(config)发送http请求，config为该请求的配置信息对象
• axios是基于Promise的HTTP客户端，所以可以使用then、catch对请求结果进行处理
• axios响应数据结构
  • data{}
  • status：200
    • 来自服务器响应的HTTP状态码
  • statuesText：’ok’
    • 来自服务器响应的HTTP状态信息
  • headers:{}
    • 服务器响应的头
  • config:{}
    • 为请求提供的配置信息

• axios全局配置

  • 针对大部分一致的内容，可以采用全局配置
  • 请求服务端根地址baseURL，通常是很多api使用统一的地址提供服务
  • Authorization的用户名密码信息等，不需要每次请求都进行设置
  • timeout请求超时时间，不需要每次请求都单独设置
  • 配置的优先级
    • 当defaults全局配置与局部config配置发生冲突时，局部config配置的优先级要高于全局配置

      三、使用axios发送的各种请求

• 请求文件，解析二进制响应值

  • 
• post请求表单数据【响应对的数据使用JSON.parse()对json的数据解析】
  • 默认请求参数是json格式
    • “content-type”: “application/json”
  • 

• 发送合并请求

  • 

    四、axios的实例与拦截器

• axios多实例的必要性

  • 
  • 根据请求不同的服务主体，创建多个axios实例
    • axios拦截器
      • 拦截器的作用就是这边的一所有请求和响应做拦截，所谓的拦截就是统一修改请求或者响应的内容、参数、配置等信息
    • request拦截器
      • 统一给请求加上JWT令牌
      • loading处理
    • response拦截器
      • 统一响应数据解析
      • 统一的异常处理