Vue3——Axios（网络请求库）_vue3 axios

求一键三连

希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！

前言

axios可以在浏览器和node里面用

原生的问题:无法在node里使用，fetch是在浏览器里使用的。(但是原生可以帮助我们理解。)

认识axios

---

使用Axios

1.安装axios
2.创建service文件夹并在里面创建index.js，import axios，然后创建封装axios的类并导出创建的axios实例对象
3.在main.js在导入封装好的对象即可使用

---

常见请求演示

get请求有两种写法，一个是直接拼接一个是写参数

pst请求是不可以拼接到url里的，

还有跨域的问题，这个可以好好了解一下

httpbin.org 走get请求测试

// 1.发送request请求
axios.request({
  url: "http://123.207.32.32:8000/home/multidata",
  method: "get"
}).then(res => {
  console.log("res:", res.data)
  //注意一般拿到数据是返回res.data,而不是返回一整个promise对象
})

// 2.发送get请求 直接拼接
axios.get('your_url')
  .then(response => {
    const data = response.data;
    console.log(data);
    //这样就可以拿到promise里的数据，都要做这样的一个处理，否则是一个promise对象。
  })
  
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
  console.log("res:", res.data.lrc)
})

// get请求  写参数
axios.get("http://123.207.32.32:9001/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log("res:", res.data.lrc)
})


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

---

配置选项

baseURL+all

// 1.baseURL,很有用，因为大部分前面都是一样的
const baseURL = "http://123.207.32.32:8000"

// 给axios实例配置公共的基础配置  要在这里配置后才可以使用
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}

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

// 1.2.get: /home/data

// 2.axios发送多个请求
// axios.all:发送多个请求  内部是封装了一下 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)   //这里返回的也是多个请求的结果
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---

创建axios实例

创建自己的axios实例
不会用默认的，为每一个url创建一个实例，不同的url对应不同的实例

取决于项目，可能会从多个服务器拿数据，这样有多个实例就更方便

// axios默认库提供给我们的实例对象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")

// 创建其他的实例发送网络请求
const instance1 = axios.create({
  baseURL: "http://123.207.32.32:9001",
  timeout: 6000,
  headers: {}
})
//创建实例之后就用实例来进行操作
instance1.get("/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log("res:", res.data)
})

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

后面可以在封装的Axios类方法里创建多个实例传出去。

---

请求拦截（掌握）

基本上都会进行拦截，可以对请求做一些处理，比如

可以在拦截之后做一些配置

拦截后操作：

// 对实例配置拦截器
axios.interceptors.request.use((config) => {
  console.log("请求成功的拦截")
  // 1.开始loading的动画

  // 2.对原来的配置进行一些修改
  // 2.1. header
  // 2.2. 认证登录: token/cookie
  // 2.3. 请求参数进行某些转化

  return config
}, (err) => {
  console.log("请求失败的拦截")
  return err
})

axios.interceptors.response.use((res) => {
  console.log("响应成功的拦截")

  // 1.结束loading的动画

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

axios.get("http://123.207.32.32:9001/lyric?id=500665346").then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---

对axios的类的封装（掌握）

用别人的库是有风险的，万一这个库不能用了，项目就会出问题，而且耦合度就太高了，修改很麻烦

解决办法，对库多封装一层，这样替换这个库的时候就直接在这个封装这里修改就好了，这样就不用全都一个个的修改，这个概念也很简单，这就是封装的好处。

这个思想真的很重要，但是这一步在项目里面就很重要，是很重要的一个思想

这个东西就很好，只有吃过亏才知道，所以这也是听课的好处，不然自己摸索不知道摸索多久

在src里面创建service的文件，用来放封装

axios请求库封装
封装源码：

import axios from 'axios'

class HYRequest {
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }
//使用this来指向当前创建的实例对象
  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, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
//后面也可以在这里创建更多的方法，方式是差不多的
}

export default new HYRequest("http://123.207.32.32:9001")
//这里导出的是一个实例对象，然后你也可以创建多个实例对象导出去，这个就是比较简单了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

老师封装好的一个更完全的axios库

使用于TS

在项目中用ts封装axios，一次封装整个团队受益