【Vue学习笔记】Axios使用

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

已于 2023-03-30 20:14:27 修改

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue学习笔记文章标签： vue.js 学习 javascript

于 2023-03-30 20:13:39 首次发布

本文链接：https://blog.youkuaiyun.com/biancheng_/article/details/129865350

Vue学习笔记专栏收录该内容

11 篇文章

订阅专栏

@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)
  })

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)
})

在上面的示例中，通过调用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('请求已取消')

在上面的示例中，通过调用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)
  })

请求配置

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)
  })

响应处理

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)
})

错误处理

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)
    }
  })

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'}
})

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

添加全局请求拦截器

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

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

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

添加全局响应拦截器

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

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

在上面的示例中，通过调用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)
}