Axios

**

Axios

**
- 基本用法：
// 注意：这里的res形参是约定俗成的，是response的意思，里面是与本次请求相关的响应信息，并不是最终的响应数据
axios.get(‘http://localhost:3000/someapi’).then((res) => {
console.log(res.data) // 通过res.data获取最终的响应数据
})

常用API：

• get：获取
• delete：删除
• post：添加
• put：修改
• 传参：
  • get|delete：
    • 语法：axios.get|delete(url, config)
    • get和delete语法都一样，仅方法名不一样
    • x-www-form-urlencoded：/someapi?name=zs&age=18
    • RestFul：/someapi/zs/18
    • params选项：axios.get|delete(url, { params: { name: ‘zs’, age: 18 } })
      • 这种方式和x-www-form-urlencoded是一样的，二者推荐使用这个
    • 补充说明：其实x-www-form-urlencoded和RestFul可以混合使用，比如：/someapi/zs?age=18
  • post|put：
    • 语法：axios.post|put(url, data, config)
    • post和put语法都一样，仅方法名不一样
    • 请求地址都支持x-www-form-urlencoded和RestFul的形式
    • 传递参数时，和get与delete有区别，第二个参数直接就是请求数据，如：axios.post|put(url, { name: ‘zs’, age: 18 }, config)，而get与delete的第二个参数是配置对象，配置对象里面的params选项才是真正的x-www-form-urlencoded形式的请求数据，而post和put的第三个参数才是配置对象
    • JSON：axios.post|put(url, { name: ‘zs’, age: 18 })
    • x-www-form-urlencoded：
      const data = new URLSearchParams()
      data.append(‘name’, ‘zs’)
      data.append(‘age’, 18)
      axios.post|put(url, data)
• 响应结果（axios将真正的响应数据包装在响应结果对象中了）：
  • data：实际的响应数据
  • status：HTTP状态码
  • config：axios相关配置对象
  • headers：响应头信息
  • statusText：响应文本信息

全局配置：

• timeout：不是延迟发送ajax请求的时间，而是响应超时时间，单位（毫秒），也就是说，如果请求发出去后，在指定的时间内还没有响应，那么就GG了
• baseURL：基准请求地址，可以统一管理基准请求地址，快速切换请求服务器，在变更后台接口环境的时候，很方便，配置了基准请求地址，在每次调用axios API 发送ajax请求时，就无须携带请求地址前缀了。
• headers：请求头信息，通常用来发送token令牌

拦截器（可以在这里处理一些公共的业务）

• 请求拦截器：
  • 语法：axios.interceptors.request.use((config) => { return config }, (err) => {})
  • 配置了请求拦截器后，在每个请求发出去之前都会先进入请求拦截器
  • 可以在请求拦截器的成功函数中获取的当前的配置对象config，在这里可以基于现有的config做一些修改，返回值会作为最终的请求配置
• 响应拦截器：
  • 语法：axios.interceptors.response.use((res) => { return res }, (err) => {})
  • 配置了响应拦截器后，在每个请求响应之前都会先进入响应拦截器
  • 可以在响应拦截器的成功函数中获取当前的响应结果，可以在这里，基于现有响应结果做调整或格式化，返回值会作为最终的响应结果（不建议在响应拦截器中把部分响应信息吃掉，比如只返回res.data，如果需要获取到除了响应数据之外的其他结果，就不友好了）