axios笔记

目录

1. 发送基本的请求

2. 请求拦截和响应拦截

3. 二次封装

---

1. 发送基本的请求

1.1 GET请求

要使用Axios发送GET请求，您可以使用Axios.get()方法。该方法接受两个参数：请求的URL和一个可选的配置选项对象。以下是一个GET请求的示例代码：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的代码执行一个GET请求，请求URL为 https://jsonplaceholder.typicode.com/posts ，然后使用Promise对象处理响应数据和错误情况。当请求成功时，返回的响应数据会在then()方法中处理，并打印到控制台中。当请求失败时，错误信息会在catch()方法中处理，并打印到控制台中。

您还可以通过在Axios.get()方法中传递一个配置选项对象来设置请求的其他选项，例如headers、params等。例如，以下代码设置了请求URL参数：

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
    userId: 1
  }
})

在上面的代码中，我们在请求URL中传递了一个名为userId的参数，其值为1。

1.2 POST请求

要使用Axios发送POST请求，您可以使用Axios.post()方法。该方法接受三个参数：请求的URL、发送的数据对象和一个可选的配置选项对象。以下是一个POST请求的示例代码：

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代码中，我们执行一个POST请求，请求URL为 https://jsonplaceholder.typicode.com/posts ，发送的数据对象包含三个字段：title、body和userId。当请求成功时，返回的响应数据会在then()方法中处理，并打印到控制台中。当请求失败时，错误信息会在catch()方法中处理，并打印到控制台中。

您也可以在Axios.post()方法中传递一个配置选项对象来设置请求的其他选项，例如headers、params等。例如，以下代码设置了请求头和响应数据类型：

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
}, {
  headers: {
    'Content-Type': 'application/json'
  },
  responseType: 'json'
})

在上面的代码中，我们设置了请求头的Content-Type为application/json，以指示发送的数据是JSON格式的。我们还设置了响应的数据类型为json，以便Axios自动将响应数据解析为JSON格式。

1.3 发送PUT请求和DELETE请求

发送PUT请求和DELETE请求跟发送POST请求类似，都需要使用axios中的`axios.put()`和`axios.delete()`方法，具体操作如下：

首先使用`axios.put()`方法发起PUT请求，方法中需要传入请求的URL和数据，代码示例如下：

axios.put('/api/users/1', { //请求的URL及请求数据
  name: 'Lucy',
  age: 18
}).then(response => {
  console.log(response.data); //处理请求的响应结果
}).catch(error => {
  console.log(error); //处理请求的错误
});

如果需要在请求头中添加自定义的信息，可以使用`headers`属性，例如：

axios.put('/api/users/1', 
 { name: 'Lucy', age: 18 },  //请求的数据
  { 
    headers: { 'X-Requested-With': 'XMLHttpRequest' } //请求头，添加自定义信息
  })
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

与发送PUT请求类似，使用`axios.delete()`方法可以发起DELETE请求，方法中需要传入请求的URL，代码示例如下：

axios.delete('/api/users/1')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

同样，如果需要在请求头中添加自定义的信息，可以使用`headers`属性，例如：

axios.delete('/api/users/1', { 
  headers: { 'X-Requested-With': 'XMLHttpRequest' } 
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

1.4 发送多个并发请求

在实际项目中，可能需要同时发送多个请求，可以使用axios中的`axios.all()`方法和`axios.spread()`方法实现并发请求。下面就来介绍一下使用axios发送多个并发请求的方法。

首先，使用`axios.all()`方法可以同时发起多个请求，该方法接受一个包含多个请求的数组作为参数。下面是一个示例：

axios.all([
  axios.get('/api/users/1'),
  axios.get('/api/users/2')
])
  .then(axios.spread((user1, user2) => {
    // two requests are now complete
    console.log(user1.data);
    console.log(user2.data);
  }))
  .catch(error => {
    console.log(error);
  });

其中，`axios.spread()`方法可以将多个请求的结果进行展开，以使结果可以便于处理。

如果不是并发请求，而是依次发送多个请求，可以使用`axios.all()`方法结合for循环来实现，同时可以使用Promise.all()方法处理并发请求的结果：

(async function() {
  const ids = [1, 2, 3];
  const requests = ids.map(id => axios.get(`/api/users/${id}`));
  try {
    const results = await Promise.all(requests);
    console.log(results.map(r => r.data));
  } catch (error) {
    console.log(error);
  }
})();

以上是使用axios发送多个并发请求的方法，需要注意的是，发送并发请求时需要考虑请求的顺序是否会影响功能的实现。

2. 请求拦截和响应拦截

2.1 请求拦截

请求拦截器可以在请求被发送之前对请求进行拦截处理，例如添加token、设置请求头等。通过axios.interceptors.request.use()方法添加请求拦截器。该方法接收2个回调参数：第一个参数是请求成功时执行的回调，第二个参数是请求失败时执行的回调。请求成功时的回调函数接受一个config参数，可以在该参数中进行请求设置，例如添加token，修改请求方式等。下面是一个示例：

axios.interceptors.request.use(
  config => {
    // 在请求发送之前添加token及其他处理
    const token = 'myToken';
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.log(error); //请求失败时的错误处理
    return Promise.reject(error);
  }
);

2.2 响应拦截

响应拦截器可以在响应被then或catch处理之前对响应进行拦截处理，比如统一处理错误。使用axios.interceptors.response.use()方法添加响应拦截器，该方法接受2个回调参数：第一个参数是请求成功时执行的回调，第二个参数是请求失败时执行的回调。请求成功时的回调函数接受一个response参数，可以在该参数中进行后续处理。下面是一个示例：

axios.interceptors.response.use(
  response => {
    // 在响应处理之前对响应进行处理
    if (response.data.code !== 200) {
      console.log(response.data.message);
      return Promise.reject(response);
    }
    return response;
  },
  error => {
    console.log(error); //响应失败时的错误处理
    return Promise.reject(error);
  }
);

2.3 全局配置

跟全局配置请求参数和请求头一样，axios还可以在全局配置中统一设置请求拦截器和响应拦截器。通过`axios.interceptors.request.use()`和`axios.interceptors.response.use()`方法，在全局范围设置拦截器。下面是一个示例：

axios.interceptors.request.use(
  config => {
    // 在请求发送之前添加token及其他处理
    const token = 'myToken';
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.log(error); //请求失败时的错误处理
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    // 在响应处理之前对响应进行处理
    if (response.data.code !== 200) {
      console.log(response.data.message);
      return Promise.reject(response);
    }
    return response;
  },
  error => {
    console.log(error); //响应失败时的错误处理
    return Promise.reject(error);
  }
);

以上代码将设置所有的请求都使用同一个请求拦截器和响应拦截器，以使请求在发起之前或者响应之后都能进行统一的处理。在拦截器中，可以根据具体的业务需求对请求或者响应进行相关处理，例如添加请求头、重定向、添加参数等。不同的拦截器之间的处理会依次进行，因此可以根据实际情况指定拦截器的顺序。

需要注意的是，在全局范围下配置拦截器会影响所有的请求和响应，因此需要谨慎使用，以免造成不必要的影响。某些场景下，可能只需要针对某一特定的请求或者响应进行特定的处理，可以使用局部范围下的拦截器配置。

3. 二次封装

//进行axios二次封装:使用请求与响应拦截器
import axios from "axios";
import { ElMessage } from "element-plus";
//引入用户相关的仓库
import useUserStore from "@/store/modules/user";
//第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)
let request = axios.create({
     //基础路径
     baseURL: import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
     timeout: 5000//超时的时间的设置
});
//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
     //获取用户相关的小仓库:获取仓库内部token,登录成功以后携带给服务器
     let userStore = useUserStore();
     if (userStore.token) {
          config.headers.token = userStore.token
     }
     //config配置对象,headers属性请求头,经常给服务器端携带公共参数
     //返回配置对象
     return config;
});

//第三步:响应拦截器
request.interceptors.response.use((response) => {
     //成功回调
     //简化数据
     return response.data;
}, (error) => {
     //失败回调:处理http网络错误的
     //定义一个变量:存储网络错误信息
     let message = '';
     //http状态码
     let status = error.response.status;
     switch (status) {
          case 401:
               message = "TOKEN过期"
               break;
          case 403:
               message = "无权访问"
               break;
          case 404:
               message = "请求地址错误";
               break;
          case 500:
               message = "服务器出现问题"
               break;
          default:
               message = "网络出现问题";
               break;
     }
     //提示错误信息
     ElMessage({
          type: 'error',
          message
     });
     return Promise.reject(error);
});
//对外暴露
export default request;