Axios

基础

基于Promise进行XHR封装

axios封装了什么？

API 常用REST
Interceptor 拦截器（请求 && 响应）
Error Handle 错误处理
Request Cancel 取消请求
Promise Syntax 基于Promise异步
JSON Response 响应JSON封装

基本使用

  axios(config)
  axios.request(config)
  axios.create() // 多用
  axios.get/post/delete/head...

config

HTTP相关
- url
- baseURL
- method
- params
- headers
- auth
数据相关
- data
- transformRequest
- transformResponse

// 针对某个实例进行特定config配置
instance.default.xxx

并发请求
``js
  可通过axios.spread()展开结果
  axios.all([
    Axios-instance,
    Axios-instance,
    Axios-instance
  ])

拦截器

拦截器基于Promise, 对应的需要返回Promise

请求拦截器
- 使用场景:
  1. [优化体验]——请求时的体验优化: loading icon
  2. [验证]——对用户token验证
  3. [参数序列化]——请求参数序列化
  4. [版本控制]——基于URL的版本控制(replace URI)
  5. [节流]——多次请求保持唯一
响应拦截器
- 使用场景:
  1. 针对响应码分类处理

基本使用插件: 请求重试(axios-retry) / 支持跨域(axios-jsonp)

  // 未对拦截器进行函数封装
  // 1. 创建实例, 配置相关的config; 2. 设置请求拦截器和相应拦截器;
  const instance = axios.create({
    baseUrl: fromEnv,
    timeout: 3000
  })

  // 每次请求前验证当前是否有token, 若有则拿出并为header中设置为X-Token字段
  instance.interceptors.request.use(config=>{
    config.headers['X-Token'] = store.getters.token && store.getters.token ()
    return config
  }, error=>{
    console.error(error)
    return Promise.reject(error)
  })

  // 每次收到相应前判断状态码是否为20000, 若不是则返回Promise[reject]
  instance.interceptors.response.use(res=>{
    return res.code === 20000 ? res : Promise.reject("Error")
  }, error=>{
    console.error(error)
    return Promise.reject(error)
  })
  export default isntance

  // 添加拓展
  async function requestInterceptor(){
    const res = await instance.interceptors.request.use(config=>{
        config.headers['X-Token'] = store.getters.token && store.getters.token ()
        return config
      }, error=>{
        console.error(error)
        return Promise.reject(error)
      })
      }

    let data = res.data || undefined
    // 业务代码
    return data

Axios ​

基础 ​

拦截器 ​

Axios

基础

拦截器