【Vue学习笔记】Axios使用_axios在vue中的使用

@TOC

一、什么是Axios?

Axios是一个基于Promise的HTTP请求库，可以用于浏览器和Node.js平台。它可以帮助我们发送异步HTTP请求，处理HTTP响应，并支持拦截器、取消请求、自动转换JSON等功能，是一个非常强大和灵活的HTTP请求库。

二、Axios的基本使用方法

安装Axios
在项目中安装Axios：

npm install axios --save

引入Axios
在需要使用Axios的地方引入Axios：

import axios from ‘axios’

发送HTTP请求
通过Axios发送HTTP请求：

axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
1
2
3
4
5
6
7

Axios提供了多种HTTP请求方法，如get、post、put、delete等，可以根据需要选择合适的方法发送HTTP请求。

配置Axios
Axios可以通过配置来实现自定义的全局配置。

示例代码：

axios.defaults.baseURL = ‘http://api.example.com’
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’
在上面的示例中，通过设置axios的defaults属性来设置全局的配置，比如设置请求的基础URL、设置请求头、设置请求参数编码格式等。

拦截器
Axios提供了拦截器机制，可以在请求或响应被发送或接收之前，对它们进行拦截和处理。

示例代码：

axios.interceptors.request.use(config => {
  // 在请求发送之前进行处理
  return config
}, error => {
  // 处理请求错误
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  // 在响应接收之前进行处理
  return response
}, error => {
  // 处理响应错误
  return Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在上面的示例中，通过调用axios.interceptors.request.use()和axios.interceptors.response.use()方法来设置请求和响应的拦截器。

取消请求
Axios支持取消请求的功能，可以通过调用请求的cancel方法来取消请求。

示例代码：

const source = axios.CancelToken.source()

axios.get('/api/users', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消')
    } else {
      console.log(error)
    }
  })

// 取消请求
source.cancel('请求已取消')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上面的示例中，通过调用axios.CancelToken.source()方法创建一个cancelToken对象，然后将其传递给请求的cancelToken参数，在需要取消请求时，调用cancelToken对象的cancel方法即可。

三、Axios的常见API

Axios的常见API可以分为以下几类：

发送请求

axios(config)：发送HTTP请求，参数是一个配置对象，包括请求的URL、请求方式、请求头、请求参数等信息。

• axios.request(config)：发送HTTP请求，与axios(config)方法相同。

• axios.get(url[, config])：发送HTTP GET请求。

• axios.post(url[, data[, config]])：发送HTTP POST请求。

• axios.delete(url[, config])：发送HTTP DELETE请求。

• axios.head(url[, config])：发送HTTP HEAD请求。

• axios.options(url[, config])：发送HTTP OPTIONS请求。

• axios.put(url[, data[, config]])：发送HTTP PUT请求。

• axios.patch(url[, data[, config]])：发送HTTP PATCH请求。
  示例代码：

axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
1
2
3
4
5
6
7

请求配置

• axios.defaults：设置全局请求配置。
• axios.create([config])：创建一个新的Axios实例，可以用于创建自定义的请求配置。
• axios.all(iterable)：发送并发请求，参数是一个可以迭代的对象，比如数组或对象。
• axios.spread(callback)：将并发请求的结果解包，参数是一个回调函数，函数的参数是所有请求的结果。
  示例代码：

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
})

axios.all([axios.get('/api/users'), axios.get('/api/posts')])
  .then(axios.spread((usersResponse, postsResponse) => {
    console.log(usersResponse.data)
    console.log(postsResponse.data)
  }))
  .catch(error => {
    console.log(error)
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

响应处理

• axios.interceptors.request.use(onFulfilled[, onRejected])：添加请求拦截器。
• axios.interceptors.response.use(onFulfilled[, onRejected])：添加响应拦截器。
• axios.isCancel(value)：判断一个值是否是一个取消请求的对象。
• axios.CancelToken：用于取消请求的对象。
  示例代码：

axios.interceptors.request.use(config => {
  // 在请求发送之前进行处理
  return config
}, error => {
  // 处理请求错误
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  // 在响应接收之前进行处理
  return response
}, error => {
  // 处理响应错误
  return Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

错误处理

• axios.isCancel(value)：判断一个值是否是一个取消请求的对象。
• axios.Cancel：取消请求的错误类。
• axios.CancelToken：用于取消请求的对象。
• axios.isAxiosError(value)：判断一个值是否是Axios请求错误。
  示例代码：

axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求已取消')
    } else {
      console.log(error)
    }
  })
1
2
3
4
5
6
7
8
9
10
11

Axios的API非常丰富和灵活，可以满足各种HTTP请求的需求，并支持拦截器、取消请求、自动转换JSON等功能，是一个非常强大的HTTP请求库。

四、Axios的封装

在Vue项目中，可以封装Axios来统一处理HTTP请求和响应，并进行全局配置，从而提高代码的可维护性和复用性。

Axios的封装步骤如下：

安装Axios

在项目中安装Axios：

npm install axios --save

创建Axios实例

在需要使用Axios的地方，创建一个Axios实例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
})
1
2
3
4
5
6
7

在上面的示例中，通过调用axios.create()方法创建一个新的Axios实例，然后可以通过实例的属性和方法来发送HTTP请求和处理HTTP响应。

添加全局请求拦截器

在Axios实例中添加全局请求拦截器，用于在请求发送之前进行处理：

instance.interceptors.request.use(config => {
  // 在请求发送之前进行处理
  return config
}, error => {
  // 处理请求错误
  return Promise.reject(error)
})
1
2
3
4
5
6
7

在上面的示例中，通过调用instance.interceptors.request.use()方法添加全局请求拦截器，用于在请求发送之前进行处理，比如添加请求头、设置请求参数等。

添加全局响应拦截器

在Axios实例中添加全局响应拦截器，用于在响应接收之前进行处理：

instance.interceptors.response.use(response => {
  // 在响应接收之前进行处理
  return response
}, error => {
  // 处理响应错误
  return Promise.reject(error)
})
1
2
3
4
5
6
7

在上面的示例中，通过调用instance.interceptors.response.use()方法添加全局响应拦截器，用于在响应接收之前进行处理，比如转换响应数据、处理响应错误等。

封装HTTP请求方法
根据实际需求，封装HTTP请求方法，比如GET、POST、PUT等方法。

示例代码：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
})

export const get = (url, params) => {
  return instance.get(url, {params})
}

export const post = (url, data) => {
  return instance.post(url, data)
}

export const put = (url, data) => {
  return instance.put(url, data)
}

export const del = (url) => {
  return instance.delete(url)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在上面的示例中，通过调用instance.get()、instance.post()、instance.put()和instance.delete()方法封装了HTTP请求方法，并导出给其他模块使用。

Axios的封装可以提高HTTP请求的可维护性和复用性，同时也可以方便地进行全局配置、添加拦截器等，是开发Vue项目不可或缺的一部分。