02【Axios】

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

原生的XMLHttpRequest API在使用上相对原始和繁琐，因此很多库对它进行了抽象和封装，以便简化开发工作和提高代码的可读性和可维护性。Axios就是这样一个库，它基于Promise设计，对原生的 XMLHttpRequest 进行了 更高级别的封装，提供了一种更易用、更符合现代JavaScript开发习惯的方式来发送HTTP请求。

axios不仅适用于浏览器环境，还可以在Node.js环境中使用，用于方便地从浏览器或Node.js应用程序发出HTTP请求。由于它的异步特性以及对Promise的良好支持，使得在处理前后端交互时能够编写更加简洁、易于理解的代码。

1. 安装与引入

使用npm安装：
shell
```
npm install axios
```
或者，如果使用yarn：
shell
```
yarn add axios
```
在JavaScript文件中引入：
javascript
```
import axios from 'axios';
```

2. 基本使用方式

Axios提供了多种请求方式：

通用配置式请求

javascript

axios({
    method: 'get', // 默认是 'get', 也可以是 'post', 'put', 'delete', 'patch' 等
    url: 'https://api.example.com/users',
    headers: {
        'Authorization': 'Bearer your_token',
    },
    params: {
        ID: 123,
        pageSize: 10,
    },
    data: {}, // 对于非GET请求，这是请求体数据
})
.then((response) => {
    console.log(response.data);
})
.catch((error) => {
    console.error(error);
});

响应结构

// 当使用 then 时，将接收如下响应:
axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

快捷方法

GET请求：

javascript

axios.get('https://api.example.com/users', {
    params: {
        ID: 123,
    }
})
.then((response) => {
    console.log(response.data);
});

POST请求：

javascript

axios.post('https://api.example.com/endpoint', postData, {
  headers: {
    'Content-Type': 'application/json', // 指定Content-Type为JSON格式
    'Authorization': 'Bearer your-token', // 添加JWT或其他认证令牌
  },
  timeout: 3000, // 设置请求超时时间为3秒
})
.then(/* ... */)
.catch(/* ... */);

其他HTTP方法：

javascript

axios.put('https://api.example.com/users/123', updatedUser);
axios.delete('https://api.example.com/users/123');
axios.patch('https://api.example.com/users/123', partialUpdate);

3.功能特性

拦截器

请求拦截器（在请求发送前执行操作，如添加全局认证头）

javascript

axios.interceptors.request.use(config => {
    config.headers.common['Authorization'] = localStorage.getItem('token');
    return config;
});

响应拦截器（在响应到达前进行处理，如统一错误处理）

javascript

axios.interceptors.response.use(response => response, error => {
    if (error.response.status === 401) {
        // 处理未授权错误
    }
    return Promise.reject(error);
});

取消请求

创建一个取消源：

javascript

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/longRequest', {cancelToken: new CancelToken(c => { cancel = c; })})
.catch(e => {
    if (axios.isCancel(e)) {
        console.log('Request canceled', e.message);
    } else {
        // 处理其他错误
    }
});
// 取消请求
cancel();

超时

javascript

axios.get('/request', {timeout: 1000}); // 设置请求超时为1秒

自动转换响应数据 Axios会尝试根据响应头的Content-Type自动解析JSON数据。
跨域支持 Axios自带支持CORS（跨源资源共享），无需额外配置即可处理跨域请求。

4.错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

5.默认配置

// 全局 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios 默认情况下不发送 cookies（除非它们属于同源策略允许的范围）。当你发起跨域请求时，即使浏览器存储了 cookies，axios 默认也不会自动包含这些 cookies 在请求头中。

// 设置 axios 全局默认行为，使其发送请求时携带 cookies
axios.defaults.withCredentials = true;

6.自定义axios

创建axios实例是为了更好地管理和定制HTTP请求行为，每个实例可以有自己的默认配置，如基本URL、超时时间、请求头等，无需每次调用时重复设置。每个实例可以绑定专属的请求拦截器和响应拦截器，便于针对特定请求流实施登录验证、错误处理、数据预处理等操作。

import axios from 'axios';

// 创建axios实例
const request = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 定制请求拦截器
request.interceptors.request.use((config) => {
    return config;
});

// 定制响应拦截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    return Promise.reject(new Error(error.message));
});

export default request;

02【Axios】 ​

1. 安装与引入 ​

2. 基本使用方式 ​

3.功能特性 ​

4.错误处理 ​

5.默认配置 ​

6.自定义axios ​

02【Axios】

1. 安装与引入

2. 基本使用方式

3.功能特性

4.错误处理

5.默认配置

6.自定义axios