axios全方位解析

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 请求客户端，用于浏览器和 Node.js 平台。它可以在浏览器和服务器之间通信，支持各种类型的请求和响应，包括 JSON、XML、URL 编码格式，也可以使用 Interceptors 实现请求和响应的拦截处理等功能。

Axios 的安装

可以通过 npm 安装 Axios：

npm install axios

Axios 的使用

在 Vue 项目中，通常需要在 src/main.js 文件中引入 Axios 并设置全局默认的请求 baseURL、请求头信息等：

import axios from 'axios';

// 设置 axios 全局默认配置
axios.defaults.baseURL = 'http://localhost:3000/api';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Vue.prototype.$axios = axios;

在组件中可以通过 $axios 访问 Axios，例如：

this.$axios.get('/users').then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

以上代码将发送一个 GET 请求到 /users 接口，并在响应完成后将响应数据输出到控制台中。

Axios 请求的基本配置

Axios 提供了多种配置选项，可以通过 axios.create() 方法将一组配置封装在一个实例中，也可以在每个请求中使用单独的配置。

发送 GET 请求

发送 GET 请求的最基本使用方法如下：

axios.get('/users').then(resp => {
  console.log('GET api response:', resp.data);
}).catch(err => {
  console.log(err);
});

发送 POST 请求

发送 POST 请求使用方法如下：

axios.post('/users', {
  name: 'John',
  age: 30
}).then(resp => {
  console.log('POST api response:', resp.data);
}).catch(err => {
  console.log(err);
});

axios.post() 方法用于发送 POST 请求，其接受两个参数：url 和 data，其中 data 是请求 body 中的数据，config 是可选的。

其他请求方式

Axios 支持多种请求方式，例如 PUT、DELETE、PATCH 等，其使用方式与 GET 和 POST 请求类似，例如：

axios.put('/users', { name: 'John', age: 30 }).then(resp => {
  console.log('PUT api response:', resp.data);
}).catch(err => {
  console.log(err);
});

axios.delete('/users/1').then(resp => {
  console.log('DELETE api response:', resp.data);
}).catch(err => {
  console.log(err);
});

axios.patch('/users/1', { age: 31 }).then(resp => {
  console.log('PATCH api response:', resp.data);
}).catch(err => {
  console.log(err);
});

Axios 请求的配置选项

Axios 还提供了许多选项，可以根据需要进行配置。

baseURL

baseURL 是用于请求的服务器地址，可以用来设置全局的默认地址，例如：

axios.defaults.baseURL = 'http://localhost:3000/api';

这样，发送 GET 请求时，使用的服务器地址就是 http://localhost:3000/api。

params

params 是发送请求时携带的 URL 参数，它可以是一个对象或 URL 参数字符串，例如：

axios.get('/users', {
  params: {
    name: 'John',
    age: 30
  }
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

data

data 是请求 body 中携带的数据，例如：

axios.post('/users', {
  name: 'John',
  age: 30
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

headers

headers 是请求头对象，它可以包含多种 HTTP 头信息，例如：

axios.post('/users', {
  name: 'John',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  }
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

timeout

timeout 是请求超时时间，默认为 0，表示无限制，可以设置一个非零的值来设置超时时间，例如：

axios.get('/users', {
  timeout: 1000
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

withCredentials

withCredentials 是设置 XMLHttpRequest 请求是否允许携带 cookie，默认为 false，例如：

axios.get('/users', {
  withCredentials: true
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

responseType

responseType 是响应数据类型，例如：

axios.get('/users', {
  responseType: 'json'
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  console.log(err);
});

Axios 还提供了多种功能强大的选项，例如拦截器、取消请求、转换数据等。

Axios 拦截器

Axios 支持请求拦截器和响应拦截器，可以在发出请求之前或响应到达之前执行一些操作。例如，在请求时添加请求头或请求参数，在响应时更新响应数据或处理错误等。

请求拦截器：

axios.interceptors.request.use(config => {
  // 在发出请求之前进行一些操作
  config.headers.Authorization = 'Bearer ' + token;
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

响应拦截器：

axios.interceptors.response.use(response => {
  // 在响应到达之前进行一些操作
  return response;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});

以上代码是一个简单的请求拦截器示例，在发出请求之前将 Authorization 头信息添加到请求头中。以相同的方式，可以添加响应拦截器，并在响应到达之前更新响应数据或处理错误。

Axios 取消请求

Axios 可以取消请求，如果用户在发出请求之后取消了该请求，可以避免不必要的开销。

取消请求的最基本方法是使用一个取消令牌，例如：

const CancelToken = axios.CancelToken;
let source = CancelToken.source();

axios.get('/users', {
  cancelToken: source.token
}).then(resp => {
  console.log(resp.data);
}).catch(err => {
  if (axios.isCancel(err)) {
    console.log('Request canceled:', err.message);
  } else {
    console.log(err);
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

在使用 axios.get() 发送请求时，通过 cancelToken 选项指定取消令牌，然后使用 source.cancel() 取消请求。如果请求被取消，axios.isCancel(err) 将返回 true，可以使用 err.message 输出取消原因。

Axios 转换数据

Axios 可以在请求与响应数据中进行转换，例如将 JSON 字符串转换为 JSON 对象、将 XML 转换为 JSON、将 URL 编码字符串转换为 JSON 等。

指定请求和响应的转换器的方法如下：

axios.defaults.transformRequest = [function (data, headers) {
  // 在向服务器发送数据之前，将其转换为 FormData 对象
  if (headers['Content-Type'].indexOf('application/x-www-form-urlencoded') !== -1) {
    return qs.stringify(data);
  } else {
    return data;
  }
}];

axios.defaults.transformResponse = [function (data) {
  // 将服务器响应的 JSON 字符串转换为 JSON 对象
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data);
    } catch (e) { /* Ignore */ }
  }
  return data;
}];

在以上代码中，假设向服务器发送数据时使用 application/x-www-form-urlencoded 编码方式，将数据转换为 FormData 对象，并在响应数据到达时将 JSON 字符串转换为 JSON 对象。

总结

以上是 Axios 的全方位解析，我们学习了 Axios 的基础用法，如 GET/POST 请求、多种配置选项等，也学习了关键的部分，如拦截器、取消请求、数据转换等。

Axios 是一个非常流行的 HTTP 请求库，由于其易于使用的接口和强大的功能，它已经成为 Vue.js 和其他现代 JavaScript 应用程序开发的事实标准之一。