axios的学习笔记

网络请求库-axios

前提：原生的网络请求

XMLHttpRequest
fetch(浏览器提供的)
- 原生网络请求的缺点:
  - 一般不采用原生网络请求，需要对它进行简单的封装
  - 原生某些功能不具备，需要自己来完成
    - 请求拦截/响应拦截
  - JS(运行环境) ->浏览器/Node(不适配)
    - fetch -> 浏览器
    - Http -> Node

1.认识axios库

为什么选择axios? 作者推荐和功能特点
- 功能特点：
  - 在浏览器中发送XMLHttpRequests请求
  - 在node.js中共发送http请求
  - 支持Promise API
  - 拦截请求和响应
  - 转换请求和响应数据
  - 等等
- 补充:axios名称的由来？个人理解
  - 没有具体的翻译
  - axios:ajax i/o system

2.axios发送请求

axios1请求方式
- 支持多种请求方式：
  - axios(config)
  - axios.request(config)
  - axios.get(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(\[\])返回的结果是一个数组，使用axios.spread可以将数组 $res1,res2$ 展开为res1,res2
常见的配置选项
- 请求地址
  - url: '/user'
- 请求类型
  - method: 'get/post/delete/put',
- 请求根路径
  - baseURL:'https://www.mt.com/api'
- 请求钱的数据处理
  - transformRequest: $function(data){}$
- 请求后的数据处理
- transformResponse: $function(data){}$
- 自定义的请求头
  - headers:{'x-Request-width': 'XMLHttpRequest'}
- URL查询对象
  - params: { id: 1222 }
- 查询对象序列化函数
  - paramsSerialize: function(params) {}
- request body
  - data: { key: 'abc' }
- 超时设置
  - timeout: 1000

3.axios创建实例

为什么要创建axios的实例呢？
- 当我们从axios模块中导入对象时，使用的实例是默认的实例；
- 当给该实例设置一些默认配置时，这些配置就被固定下来了
- 但是后续开发中，某些配置可能会不太一样；
- 比如某些请求需要使用特定的baseURL或者timeout等
- 这个时候，可以创建新的实例，并且导入属于该实例的配置信息
javascript 复制代码
```
  // axios默认库提供给我的实例对象
  // axios.get('http://123.207.32.32:9001/lyric?id=500665346')

  // 创建其他的实力发送网络请求
  const instance1 = axios.create({
    baseURL: 'http://123.207.32.32:9002',
    timeout: 6000,
    headers: {}
  })

  instance1.get('/lyric', {
    params: {
      id: 500665346
    }
  }).then((res) => {
    console.log('res.data===', res.data);
  })
```

4.axios的拦截器

请求和响应拦截器

axios的也可以设置拦截器：拦截每次请求和响应
axios.interceptors.request.use(请求成功拦截，请求事变拦截)
axios.interceptors.response.use(响应成功拦截，响应失败拦截)

javascript 复制代码

    import axios from 'axios'
    axios.interceptors.request.use((config) => {
      // 设置一些请求头参数
      // config.headers['token'] = 'abcdef';

      // 请求拦截可做一些操作
      // 1.开始loading的动画

      // 2.对原来的配置进行一些修改
      // 2.1 header
      // 2.2 认证登录：token/cookie
      // 2.3 请求参数进行某些转化
      console.log('请求成功的拦截');
      return config
    }, (err) => {
      console.log('请求失败的拦截');
      return err
    })

    axios.interceptors.response.use((res) => {
      console.log('响应成功的拦截');
      // 1.结束loading的动画

      // 2.对数据进行转化，再返回数据
      return res.data
    },(err) => {
      console.log('响应失败的拦截');
      return err
    })

5.axios请求封装

javascript 复制代码

// service.js
import axios from "axios"

class HyRequest {
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }
  request(config) {
    return new Promise((resolve, reject) => {
      this.instance.request(config).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }
  
  get(config) {
    return this.request({...config, methods: 'get'})
  }

  post(config) {
    return this.request({...config, methods: 'post'})
  }
}


const instance1 = new HyRequest('http://123.207.32.32:9002')
const instance2 = new HyRequest('http://123.207.32.32:8000')

export default new HyRequest('http://123.207.32.32:9002')