npm库中的一个目前最流行的前端请求插件

axios可以支持前端和Node.js端的请求

安装

npm install axios

使用

使用的时候引入axios，在代码中就可以直接使用，axios的用法和fetch比较类似，不过axios会自动帮我们做完fetch第二步中的json，我们在axios后面可以直接.then调取请求结果。

  1. import axios from "axios";
  3. // axios的get方法有两个参数，我们可以只填写第一个参数
  4. // 第一个参数为请求的地址，我们可以直接在网址后面添加请求的get参数，也可以将这些参数放到get的第二个参数中
  5. 第二个参数我们可以添加请求的一些参数
  6. axios.get("url?ID=12345")
  8. axios.get("url",{
  9.   params: {
  10.     ID:12345
  11.   }
  12. })
  14. // axios的post方法，
  15. axios.post({
  16.   method:'post',
  17.   url:'url',
  18.   data: {
  19.     ID:12345
  20.   },
  21. });

创建实例

在axios下有个create的方法，可以创建axios的实例，在axios实例中可以加入很多东西，例如method（请求方法），params（get请求的参数），data（post请求的参数），在这两个里面我们可以带上每次请求都需要带的数据，例如token之类的。

  1. const instance = axios.create({
  2.   // baseURL:设置网站根路径
  3.   baseURL:"http://www.pudge.wang:3000/api",
  4.   // timeout:设置超时时间
  5.   timeout:1000,
  6.   // 设置请求头
  7.   headers:{'X-Custom-Header':'foobar'}
  8. });

拦截器

请求拦截器
  1. // 在上面创建了请求实例之后，我们可以设置拦截器
  2. // 在请求发送之前，我先执行拦截器
  3. // config就是我们发送的请求，我们可以在发送请求前再对请求数据进行一些修改，例如之前没有添加token，可以在这里将token加入进去，如果请求头与我们封装的不同，也可以在这个修改我们的请求头。
  4. instanse.interceptors.request.use(
  5.   function (config) {
  6.     console.log(config); // 打印出来的是一个请求数据组成的对象
  7.     return config;
  8.   },
  9.   function (error) {
  10.     return Promise.reject(error);
  11.   }
  12. )
响应拦截器
  1. // 响应拦截器会在我们一接收响应数据时执行，reponse就是服务器响应的数据
  2. // 我们同样可以在里面对response进行一些处理和一些判断之类的操作
  3. instanse.interceptors.response.use(
  4.   function (response) {
  5.     console.log(response);
  6.     return response;
  7.   },
  8.   function (error) {
  9.     return Promise.reject(error);
  10.   }
  11. )

axios常用的五种请求方式

  1. axios.request(config);
  2. axios.get(url, config); // 只支持params传参
  3. axios.delete(url[, config]); // 只支持params传参
  4. axios.head(url[, config]); // 只支持params传参
  5. axios.post(url[, data[, config]]); // 同时支持data和params传参
  6. axios.put(url[, data[, config]]); // 同时支持data和params传参
  7. axios.patch(url[, data[, config]]); // 同时支持data和params传参
get：获取数据

用get方法请求时，传参数一定要使用params关键字作为属性传递，params会出现在请求头中的querry string parameters中，并且会出现在浏览器的地址栏中，即会拼接到url中。

  1. // 写法一
  2. axios.get(url, {
  3.     params:{
  4.         id:12,
  5.     },
  6. }).then((res) => {
  7.     // 执行成功后处理的代码
  8. })
  10. // 写法二
  11. axios({
  12.     method:'GET',
  13.     params:{
  14.         id:12,
  15.     },
  16.     url:'请求的接口',
  17. }).then((res) => {
  18.     // 执行成功后处理的代码
  19. })
post：提交数据（表单提交+文件上传）

post方式请求，参数有两种形式：

1、from-data表单提交（图片上传，文件上传）

2、application/json

  1. // 方法一
  2. let data = {
  3.   id:12,
  4. };
  5. axios.post(url,{data}).then((res) => {
  6.   //执行成功后处理的代码
  7. });
  9. // 方法二
  10. axios({
  11.   method:'POST',
  12.   data:data,
  13.   url:'后台地址',
  14. }).then((res) => {
  15.   // 执行成功后的处理代码
  16. })
  1. // 写法一
  2. let data = {
  3.   id:12,
  4. };
  5. let fromData = new fromData();
  6. for(let key in data) {
  7.   formData.append(key, data[key]);
  8. }
  9. axios.post(url, {fromData}).then((res) => {
  10.   // 执行成功后的处理代码
  11. })
  13. // 写法二
  14. axios({
  15.   method:'POST',
  16.   data:fromData,
  17.   url:'后台地址',
  18. }).then((res) => {
  19.   // 执行成功后的处理代码
  20. })
put：更新数据（所有数据推送到后端）
  1. // 方法一
  2. let data = {
  3.   id:12,
  4. };
  5. axios.put(url,{data}).then((res) => {
  6.   //执行成功后处理的代码
  7. });
  9. // 方法二
  10. axios({
  11.   method:'PUT',
  12.   data:data,
  13.   url:'后台地址',
  14. }).then((res) => {
  15.   // 执行成功后的处理代码
  16. })
patch：更新数据（只将更改的数据推送到后端）
  1. // 方法一
  2. let data = {
  3.   id:12,
  4. };
  5. axios.patch(url,{data}).then((res) => {
  6.   //执行成功后处理的代码
  7. });
  9. // 方法二
  10. axios({
  11.   method:'PATCH',
  12.   data:data,
  13.   url:'后台地址',
  14. }).then((res) => {
  15.   // 执行成功后的处理代码
  16. })
delete：删除数据
  1. // 方法一
  2. axios.delete(url,{
  3.   params:{
  4.     id:12,
  5.   },
  6. }).then((res) => {
  7.   //执行成功后处理的代码
  8. });
  10. // 方法二
  11. axios({
  12.   method:'DELETE',
  13.   params:{
  14.     id:12,
  15.   },
  16.   url:'后台地址',
  17. }).then((res) => {
  18.   // 执行成功后的处理代码
  19. })