axios库

axios库的介绍

有了原生网络请求为什么还需要axios库:

原生的AJAX和fetch, 某些功能不完善, 需要自己封装, 例如响应拦截和请求拦截, 使用起来是非常繁琐的

于是出现了对原生网络请求封装的库, 就是axios库, 它相对原生网络请求提供了很多好用的功能, 并且axios库同时适配浏览器和Node的, 在浏览器和Node中使用axios库的API完全相同

Vue作者推荐使用axios库

axios库的功能特点:

axios在浏览器中发送 XMLHttpRequests 请求, 意味着axios是没有兼容性的问题的

axios在 node.js 中会自动切换发送 http请求

支持 Promise API

可以拦截请求和响应

通过一些函数可以转换请求和响应数据

等等…

补充: axios名称的由来? 个人理解

axios不是一个单词, 没有具体的翻译.

个人理解axios拆开是ajax i/o system: ajax 输入/输出 系统

---

axios请求方式

支持多种请求方式:

axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

当然我们开发中最常用的还是get请求和post请求

常见的配置选项:

请求地址: url: ‘/user’

请求类型: method: ‘get’

请根路径: baseURL: ‘http://www.mt.com/api’

请求前的数据处理: transformRequest:[function(data){}]

请求后的数据处理: transformResponse: [function(data){}]

自定义的请求头: headers:{‘x-Requested-With’:‘XMLHttpRequest’}

URL查询对象: params:{ id: 12 }

查询对象序列化函数: paramsSerializer: function(params){}

请求体: data: { key: ‘aa’}

超时时间设置: timeout: 1000

---

axios基本使用

axios基本演练

安装axios: npm install axios

安装完成后, 在要发送网络请求的地方使用axios就可以发送网络请求, 由于开发中最常用的是get和post请求, 下面主要演示get和post请求的使用

• 通过request发送get请求

import axios from 'axios'

// request函数返回一个Promise, 当请求有结果, 内部会自动调用resolve
axios.request({
  // 配置请求url地址
  url: "http://123.207.32.32:8000/home/multidata",
  // 配置请求方式, 不写默认也是get请求
  method: "get"
}).then(res => {
  // 直接拿到结果是axios默认给我们返回的配置对象
  // 如果想单纯拿到服务器的数据需要 .date
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

• request发送post请求

import axios from 'axios'

axios.request({
  url: "http://123.207.32.32:1888/02_param/postjson",
  method: "post",
  // 传入请求体
  data: {
    name: "kaisa",
    password: "aaa123"
  }
}).then(res => {
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

• 通过get函数直接发送get请求

import axios from 'axios'

// get函数传入两个参数, 参数1: url地址, 参数2: 配置信息
axios.get("http://123.207.32.32:9001/lyric", {
  // 传入查询字符串
  params: { id: 500665346 }
}).then(res => {
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9

• 通过post函数直接发送post请求

import axios from 'axios'

// post函数传入三个参数, 第一个url, 第二个请求体, 第三个配置信息
axios.post("http://123.207.32.32:1888/02_param/postjson", {
  name: "kaisa",
  password: "aaa123"
}).then(res => {
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9

import axios from 'axios'

// post函数另一种写法
// 第一个url, 第二个参数可以直接当成配置信息, 请求体写在配置信息的data中
axios.post("http://123.207.32.32:1888/02_param/postjson", {
  name: "kaisa",
  password: "aaa123"
}).then(res => {
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9
10

配置baseURL

我们来看这样一个例子: 在开发中我们请求的url地址其实前面都是相同的, 只是后面一部分不相同, 如下

请求地址1: http://123.456.23.23:8000/home/multidata

请求地址2: http://123.456.23.23:8000/home/data

请求地址3: http://123.456.23.23:8000/about/data

在每次网络请求时, 都写一遍是非常繁琐的, 我们可以通过baseURL将相同的地址抽离出去

import axios from 'axios'

// 1.抽离到baseURL变量中
const baseURL = "http://123.207.32.32:8000"

// 给axios实例配置公共的基础配置
// 2.配置公共的请求地址baseURL
axios.defaults.baseURL = baseURL
// 补充: 此外还可以配置公共的 超时时间... 等等
axios.defaults.timeout = 10000

// 此时发生请求就不需要传入完整的url
axios.get("/home/multidata").then(res => {
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

axios创建实例

我们导入的axios就是默认axios的实例, 既然有了默认的实例为什么要创建axios的实例呢?

const 实例名 = axios.create({})

当我们从axios模块中导入对象时, 使用的实例是默认的实例；

当给该实例设置一些默认配置时, 这些配置就被固定下来了.

但是后续开发中, 某些配置可能会不太一样, 比如某些请求需要使用特定的baseURL或者timeout等.

这个时候, 我们就可以创建新的实例, 并且传入属于当前实例的配置信息.

如果有多个不相同的配置, 我们可以创建多个实例单独为每个实例进行配置, 当需要哪一个实例, 就调用哪一个实例, 实例之间的配置信息互不影响

import axios from 'axios'

// crete函数创建axios实例
const instance1 = axios.create({
  // 创建axios实例可以进行公共的配置信息, 且这些配置只针对当前实例
  baseURL: "http://123.207.32.32:9001",
  timeout: 6000,
  headers: {}
})

// 当baseURL的请求地址不一样时, 可以再创建一个实例
const instance2 = axios.create({
  baseURL: "http://123.207.32.32:8000",
  timeout: 10000
})

// 实例1发送网络请求
instance1.get("/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log(res.data)
})

// 实例2发送网络请求
instance2.get("/home/multidata").then(res => {
  console.log(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

---

axios多个请求

有时候, 我们可能需求同时发送两个请求

使用axios.all, 可以放入多个请求的数组.

axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

当数组中的请求都有结果是, 才会返回结果

import axios from 'axios'

// 同时发生多个网络请求
axios.all([
  axios.get("/home/multidata"),
  axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {
  console.log(res)
})
1
2
3
4
5
6
7
8
9

axios请求和响应拦截

axios的也可以设置拦截器, 通过实例.interceptors设置拦截器：拦截每次请求和响应

请求拦截格式: axios.interceptors.request.use(请求成功回调拦截, 请求失败回调拦截)

响应拦截格式: axios.interceptors.response.use(响应成功回调拦截, 响应失败回调拦截)

请求拦截

请求成功拦截, 会将配置信息config传给回调函数, 我们可以通过config修改当次请求的配置信息, 修改完成后我们需要将返回return config

请求失败拦截, 会将错误信息err传给回调函数

import axios from 'axios'

axios.interceptors.request((config) => {
  console.log("请求成功的拦截, 可以通过config修改配置信息")
  // 修改了配置信息需要再将配置信息返回出去
  return config
}, (err) => {
  console.log("请求失败的拦截")
  return err
})
1
2
3
4
5
6
7
8
9
10

响应拦截

响应成功拦截, 会将请求成功的数据传给成功的回调函数

我们前面说过axios的请求结果, 会默认会返回一个配置对象, 响应拿到服务器的数据需要 .data 才可以获取, 其实这一转换操作, 我们可以在响应拦截中完成

axios.interceptors.response((res) => {
  console.log("响应成功的拦截")
  return res.data
}, (err) => {
  console.log("响应失败的拦截")
  return err
})
1
2
3
4
5
6
7

请求拦截响应拦截应用

比如我们需要有个loading的加载动画, 可以在请求拦截中开始动画, 响应拦截中结束动画

axios请求库封装(简洁版)

axios已经非常好用, 那么我们为什么还要对axios进行封装呢

axios非常好用, 当我们在多个组件中需要发生网络请求的时候, 多个组件都需要导入axios实例, 再通过axios实例发送网络请求

这样的用法是没有问题的, 但是axios毕竟是一个第三方的库, 不是官方维护的, 如果有一天axios不再进行维护了, 我们项目中使用axios的地方都需要重构, 这个工程量是非常大的, 修改起来也非常不方便

那么解决方案是, 我们使用axios封装一个自己的request函数, 当axios真的不再维护, 我们修改代码时, 只需要修改自己封装的函数即可, 这样重构代码会非常简单

import axios from "axios";

class myRequest {
  // 传入默认配置信息, 创建新的实例
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }

  // 1.封装request
  request(config) {
    // 返回一个Promise, 对数据转换
    return new Promise((reslove, reject) => {
      axios.request(config).then(res => {
        reslove(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }

  // 2.封装get
  get(config) {
    //  调用自己的request函数
    return this.request({ ...config, methods: "get" })
  }

  // 3.封装psot
  post(config) {
    //  调用自己的request函数
    return this.request({ ...config, methods: "post" })
  }
}

export default new myRequest()
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