axios使用详解 小白福利~

一、Axios定义和基本设置

Axios是基于 Promise 的 ajax 封装库，也是前端目前最流行的 ajax 请求库。是一个基于Promise的HTTP客户端，设计用于浏览器的node.js环境中。

Axios的核心特性包括：

• 异步的 ajax 请求库。
• 在浏览器端和 node 端都可以使用。
• 支持 Promise API。
• 支持请求和响应拦截。
• 响应数据自动转换 JSON 数据。
• 支持请求取消。
• 可以批量发送多个请求。
• 客户端支持安全保护，免受 XSRF 攻击。

1.1 安装

/* npm 安装 */
npm install axios --save

/* 使用 yarn */
yarn add axios

/* cdn 引入 */
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1.2 axios API

axios({
 method: 'post', //请求方法
 url: '/user/12345', //访问接口
 data: { //传输数据
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
});
/* 如发送一个get请求的配置参数如下 */
axios({
  method: 'get',
  url: 'http://localhost:80/one',//请求接口
  responseType: 'stream'//响应形式
})
  .then(function (response) {
        return response
 });

1）、常用请求方式分别为：

get：获取数据

post：向指定资源提交数据（例如表单提交或文件上传）

put：更新数据（所有数据推送到服务端）

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

axios.request(config)
axios.get( url , config)
axios.delete( url , config)
axios.head( url , config)
axios.options( url , config)
axios.post( url [,data [, config ]])
axios.put( url [,data [, config ]])
axios.patch( url [,data [, config ]])

2）、常用实例配置

baseURL 请求的域名，基本地址，类型：String
timeout 请求超时时长，单位ms，类型：Number
url 请求路径，类型：String
method 请求方法，类型：String
headers 设置请求头，类型：Object
params 请求参数，将参数拼接在URL上，类型：Object
data 请求参数，将参数放到请求体中，类型：Object

示例如下：

// 创建一个Axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  url: '/user',
  method: 'post',
  headers: {'Authorization': 'Bearer your_token'},
  params: {id:1}
});

二、Axios拦截器、响应器

1.拦截器是什么？

Axios中的拦截器是一种机制，允许你在发送请求之前和接收响应之后对请求和响应进行拦截和处理。拦截器可以用于添加公共的请求头、请求参数处理、错误处理等。

Axios提供了两种类型的拦截器：请求拦截器和响应拦截器。

 1）、请求拦截器

请求拦截器允许你在发送请求之前对请求进行修改或添加额外的配置。你可以使用axios.interceptors.request.use()方法来添加请求拦截器。下面是一个示例：

axios.interceptors.request.use(config {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer your_token';
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

在上面的示例中，我们使用axios.interceptors.request.use()方法添加了一个请求拦截器。拦截器函数接收一个config对象作为参数，你可以在这里修改请求的配置，比如添加请求头。

 2）、响应拦截器

响应拦截器允许你在接收到响应之后对响应进行拦截和处理。你可以使用axios.interceptors.response.use()方法来添加响应拦截器。下面是一个示例：
 

axios.interceptors.response.use(response {
  // 对响应数据做些什么
  console.log(response.data);
  return response;
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error);
});

在上面的示例中，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器。拦截器函数接收一个response对象作为参数，你可以在这里对响应数据进行处理，比如打印响应数据。

3)、取消拦截器

let inter = axios.interceptors.request.use(config=>{
  config.header={
    auth:true
  }
  return config
})
axios.interceptors.request.eject(inter)

4）、错误处理

不管请求拦截器还是响应拦截器，只要发生错误都会执行catch方法

//  请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    return config;
  },
  err => {
    // 在请求错误的时候的逻辑处理
    return Promise.reject(err);
  }
);
// 响应拦截器
axios.interceptors.response.use(
  res => {
    // 在请求成功后的数据处理
    return res;
  },
  err => {
    // 在响应错误的时候的逻辑处理
    return Promise.reject(err);
  }
); 
axios
  .get("/user")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    // 这个可以捕获请求/响应拦截中的错误，进行相关处理
    console.log(res);
  });

三、实际案例封装请求示例：

创建一个名为request.js的文件，放在utils下

 
import axios from 'axios';
 
// 基本配置
const instance = axios.create({
  baseURL: 'http://localhost:3000/', // 根据实际情况修改API地址
  timeout: 5000 // 设置超时时间，单位为ms
});
 
// 请求拦截器
instance.interceptors.request.use(config => {
  config.headers['Authorization'] = localStorage.getItem('token'); // 设置请求头部分，这里举例使用了localStorage存储的token作为身份标识
  return config;
}, error => {
  console.log(error);
  return Promise.reject(error);
});
 
// 响应拦截器
instance.interceptors.response.use(response => {
  const data = response.data;
  if (data && data.code !== 200) { // 根据接口返回的状态码判断是否有错误
      alert(`Error code ${data.code}: ${data.message}`); // 自定义错误提示
      return Promise.reject(new Error(data.message));
  } else {
      return data;
  }
}, error => {
  console.log(error);
  return Promise.reject(error);
});
 
export default instance;