学习axios库的基本使用

学习对一个库的使用还是很简单的，需要的功能（基本收发、拦截、浏览器node适配）人家都写好了，你只要了解配什么参数，调什么方法，能实现什么功能，就能用起来啦

1 调用内置方法，传入参数，一步完成功能

//1.1
axios.request({
  url: "http://123.207.32.32:8000/home/multidata",
  method: "get"
}).then(res => {
  console.log("res:", res.data)
})


//1.2.发送get请求
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
  console.log("res:", res.data.lrc)
})
axios.get("http://123.207.32.32:9001/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log("res:", res.data.lrc)
})


//1.3发送post请求
axios.post("http://123.207.32.32:1888/02_param/postjson", {
  name: "coderwhy",
  password: 123456
}).then(res => {
  console.log("res", res.data)
})

// 2.1 结合defaults属性后更便捷
axios.defaults.baseURL = "http://123.207.32.32:8000"
axios.defaults.timeout = 10000
axios.defaults.headers = {}    
// 给axios实例配置公共的基础配置

axios.get("/home/multidata").then(res => {
  console.log("res:", res.data)
})

//2.2 类似 Promise.all
axios.all([
  axios.get("/home/multidata"),
  axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {
  console.log("res:", res)
})

2.可以不用默认的axios实例，实际开发中可能会创建多个axios实例，分别设置一套不同的配置。

const instance1 = axios.create({
  baseURL: "http://123.207.32.32:9001",
  timeout: 6000,
  headers: {}
})

const instance2 = axios.create({
  baseURL: "http://123.207.32.32:8000",
  timeout: 10000,
  headers: {}
})

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

3.给axios实例配置拦截器，即发出请求或收到响应后要执行的函数，就像是统一设在了每个请求的then或catch里。

// 每次发出请求后，都会去执行你传入的回调函数
//发送成功会执行你传的第一个回调函数，发送失败执行你传的第二个回调函数
axios.interceptors.request.use((config) => {
  console.log("请求成功的拦截")
  return config
}, (err) => {
  console.log("请求失败的拦截")
  return err
})


//每次收到响应后……
axios.interceptors.response.use((res) => {
  console.log("响应成功的拦截")
  return res.data
}, (err) => {
  console.log("响应失败的拦截:", err)
  return err
})

实际开发中，我们会在拦截后做什么操作呢，常有以下几个

1. 请求成功后开一个loading的动画，响应成功后结束loading的动画

2.常在响应成功拦截里进行对拿到的数据进行处理的操作, 这样各个请求在then里拿到的就是处理好的数据

3.请求成功的拦截里，一些修改配置的操作，比如 header、认证登录: token/cookie

4.封装axios。对第三方库里的方法再二次封装一层是必要的，使用更方便，如果后面换库也方便。

import axios from 'axios'

class HYRequest {
  constructor(baseURL, timeout=1000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }

  request(config) {
    return this.instance.request(config)
  }

  get(config) {
    return this.request({ ...config, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
}

export default new HYRequest("http://123.207.32.32:9001")
//其实上面request你还可以写点东西，比如下面，
  // request(config) {
  //   return new Promise((resolve, reject) => {
  //     this.instance.request(config).then(res => {
  //       resolve(res.data) //这么一大坨好像为的就这一句，像前面的拦截器一样，处理了一下数据
  //     }).catch(err => {
  //       reject(err)
  //     })
  //   })
  // }

上面这是最基本的封装，封装还是很有发挥空间的，后面注意积累学习