网络模块封装

一、选择什么网络模块
Vue中发送网络请求有很多的方式,那么,在开发中,如何选择呢?
  • 选择一:传统的Ajax是基于XMLHTTPRequest(XHR)
  • 选择二:jQuery-Ajax--基于jQuery
  • 选择三:官方在Vue1.x的时候,推出了Vue-resource--不再维护
  • 以上三种不推荐
  • 选择四:axios
 
二、为什么选择axios
  • 功能特点:
    • 在浏览器中发生XMLHttpRequests请求
    • 在nodejs中发送http请求
    • 支持Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 等等
 
三、axios请求方式
  • 支持多种请求方式
    • axios(config)--默认get请求
    • axios.request(config)
    • axios.get(url,config)
    • axios.delete(url,config)
    • axios.head(url,config)
    • axios.post(url.data.config)
    • axios.put(url,data,config)
    • axios.patch(url,data,config)
  • 发送并发请求
    • axios.all()可以放入多个请求的数组
    • axios.all()返回的结果是一个数组
0
  • axios的配置信息相关
    • baseURL是固定的
    • 很多参数都是固定的:timeout,
    • 基本信息一样可以全局配置
    • axios.defaults.baseURL = ''
    • axios.defaults.timeout = 5000
    • 常见的配置选项
      • 请求地址
      • 请求类型method
      • 请求根路径baseURL
      • 请求前的数据处理transformRequest:[function(data){}]
      • 请求后的数据处理transformResponse: [function(data){}]
      • 自定义的请求头headers: {'x-Requested-With':'XMLHttpRequest'}
      • URL查询对象params: {id: 12}
      • 查询对象序列化函数
      • request body
      • 超时设置
      • 跨域是否带token
      • 自定义请求处理
      • 身份验证信息
      • 响应的数据格式
 
0
 
  • axios的实例和模块化
    • 创建axios实例 axios.create()
0
  • axios的模块化
    • 封装axios
    • axios.create()创建实例instance
    • 发送请求
0
 
0
 
  • axios的拦截器
    • axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行对应的处理
    • 如何使用拦截器
 
0
 
原文地址:https://www.cnblogs.com/yrrong/p/15736685.html