axios介绍和使用

c1033632024-02-21 15:41

1. Axios是什么

Axios框架全称（ajax -- I/O -- system）

Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境。它可以发送HTTP请求并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换JSON数据等功能。

Axios提供了一个简单而直观的API，使得在前端应用程序中进行HTTP通信变得更加容易。它可以与现代前端框架（如React、Vue.js和Angular）以及后端服务器（如Node.js）配合使用。

使用Axios可以发送各种类型的HTTP请求，如GET、POST、PUT、DELETE等。可以设置请求头、请求参数、超时时间，并且还可以通过拦截器在请求发送之前或响应返回之后对请求和响应进行处理。

一句话概括：Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境，简化了前端应用程序中与服务器进行HTTP通信的过程。

Promise不了解的可以看这个： Promise介绍和使用

2. Axios安装和使用

2.1. 使用npm安装

bash 复制代码 
 npm install axios

2.2. Axios使用

在组件中引入axios并使用

javascript 复制代码 
<template>
  <div class="hello">
    <button @click="get">GET请求</button>
  </div>
</template>

<script>

import axios from "axios"

export default {
  methods: {
    get(){
      axios.get('/user').then(res=>{
        console.log(res.data);
      })
    }
  }
}
</script>

3. Axios请求方式

3.1. axios中常用请求方法

get：获取数据

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

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

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

delete：删除数据

3.1.1. get方法

3.1.1.1. 方式1

不带参数

javascript 复制代码 
axios
  .get("/user")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

带参数

javascript 复制代码 
axios
  .get("/user", {
    params: {
      id: 12
    }
  })
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });
3.1.1.2. 方式2

不带参数

javascript 复制代码 
axios({
  method:'get',
  url:'/user'
}).then(res=>{
  console.log(res)
})

带参数

javascript 复制代码 
axios({
  method: "get",
  url: "/user",
  params:{
    id:12
  }
}).then(res => {
  console.log(res);
});

GET请求参数会在URL中展示出来，效果如下

URL：http://localhost:8080/user?id=1

3.1.2. post方法

常用的两种post请求类型

  1. application/json 一般是用于 ajax 异步请求
  2. form-data 表单提交，图片上传、文件上传
3.1.2.1. application/json

使用json格式请求，平时最常用

请求头中Content-Type: application/json;charset=UTF-8

方式1

javascript 复制代码 
let data = {
  id: 1
};
axios.post("/user", data).then(res=>{
  console.log(res, 'post')
});

方式2

javascript 复制代码 
let data = {
  id: 1
};
axios({
  method:'post',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})
3.1.2.2. form-data

请求头中Content-Type: multipart/form-data

javascript 复制代码 
let data = {
  id: 1
};
let formData = new FormData();
for(let key in data){
  formData.append(key,data[key])
}
console.log(formData)
axios.post('/user',formData).then(res=>{
  console.log(res,'formData')
})

3.1.3. put方法

3.1.3.1. 方式1
javascript 复制代码 
let data = {
  id: 1
};
axios.put("/user", data).then(res=>{
  console.log(res, 'put')
});
3.1.3.2. 方式2
javascript 复制代码 
let data = {
  id: 1
};
axios({
  method:'put',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})

3.1.4. patch方法

3.1.4.1. 方式1
javascript 复制代码 
let data = {
  id: 1
};
axios.patch("/user", data).then(res=>{
  console.log(res, 'patch')
});
3.1.4.2. 方式2
javascript 复制代码 
let data = {
  id: 1
};
axios({
  method:'patch',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})

3.1.5. delete方法

3.1.5.1. 方式1：params

params方式会将请求参数拼接在url上面

http://localhost:8080/user?id=1

javascript 复制代码 
axios
  .delete("/user", {
    params: {
      id: 1
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
let params = {
  id: 1
};
axios({
  method:'delete',
  url:'/user',
  params:params
}).then(res=>{
  console.log(res)
})
3.1.5.2. 方式二：data

data请求参数是直接放置在请求体中的，url上不会展示

javascript 复制代码 
axios
  .delete("/user", {
    data: {
      id: 1
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
let data = {
  id: 1
};
axios({
  method:'delete',
  url:'/user',
  data:data
}).then(res=>{
  console.log(res)
})

3.1.6. 并发请求

并发请求就是同时进行多个请求，并统一处理返回值

使用axios.all进行并发请求，使用axios.spread对返回的结果分别进行处理

javascript 复制代码 
axios.all([axios.get("/user"), axios.get("/product")]).then(
  axios.spread((userRes, productRes) => {
    console.log(userRes, productRes);
  })
);

4. Axios实例

4.1. Axios实例是什么

Axios实例是Axios库中的一个对象，它允许创建具有自定义配置的独立实例，以便在不同的请求中使用不同的设置。

使用Axios实例可以设置默认的请求配置、自定义拦截器、设置基本URL等。这对于在项目中的不同部分使用不同的配置非常有用，或者当需要同时与多个服务器进行通信时。

比如有两个接口请求，一个请求超时时间是10s, 另一个是30s，这时就可以创建两个实例，配置不同的超时时间

4.2. 创建Axios实例

javascript 复制代码 
// 实例1
let instance = axios.create({
  baseURL:'http://loacalhost:8080',
  timeout:1000
})
instance.get('/user').then(res=>{
  console.log(res)
})
//实例2
let instance2 = axios.create({
  baseURL: "http://loacalhost:8081",
  timeout: 3000
});
instance2.get("/product").then(res => {
  console.log(res);
});

axios实例常用配置：

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

示例如下：

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

4.3. Axios配置

4.3.1. axios全局配置

javascript 复制代码 
axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 2000

4.3.2. axios实例配置

javascript 复制代码 
let instance = this.$axios.create();
instance.defaults.timeout = 3000;

4.3.3. axios请求配置

javascript 复制代码 
instance.get('/user.json',{
  timeout:5000
})

配置的优先级为：请求配置 > 实例配置 > 全局配置

5. 拦截器

5.1. 拦截器是什么

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

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

5.2. 请求拦截器

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

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

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

5.3. 响应拦截器

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

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

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

5.4. 取消拦截器

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

6. 错误处理

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

javascript 复制代码 
//  请求拦截器
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);
  });

7. 取消请求

这个比较少用

使用的场景：在查询数据的时候，长时间仍未获取数据，这个时候需要取消请求

javascript 复制代码 
let source = axios.CancelToken.source();
axios
  .get("/user", {
    cancelToken: source.token
  })
  .then(res => {
    console.log(res);
  }).catch(err=>{
    console.log(err)
  })
// 取消请求(参数msg)
source.cancel('自定的的字符串可选')

8. 实际项目中的一个请求类（request.js）

javascript 复制代码 
import axios from 'axios'

const request = axios.create({
  baseURL: '/api', 
  timeout: 5000
})
let token = '';
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
//添加一个请求拦截器
axios.interceptors.request.use(function (config) {
  let user = JSON.parse(window.sessionStorage.getItem('access-user'));
  if (user) {
    token = user.token;
  }
  config.headers.common['token'] = token;
  //console.dir(config);
  return config;
}, function (error) {
  // Do something with request error
  console.info("error: ");
  console.info(error);
  return Promise.reject(error);
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
  response => {
    let res = response.data;
    // 如果是返回的文件
    if (response.config.responseType === 'blob') {
      return res
    }
    // 兼容服务端返回的字符串数据
    if (typeof res === 'string') {
      res = res ? JSON.parse(res) : res
    }
    return res;
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

// 以request暴露出去
export default request
相关推荐
拾光拾趣录4 分钟前
CSS 深入解析：提升网页样式技巧与常见问题解决方案
前端·css
莫空00004 分钟前
深入理解JavaScript属性描述符：从数据属性到存取器属性
前端·面试
guojl5 分钟前
深度剖析Kafka读写机制
前端
FogLetter6 分钟前
图片懒加载：让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan6 分钟前
vscode webview 插件开发（精装篇）
前端
Mxuan7 分钟前
vscode webview 插件开发（交付篇）
前端
Mxuan9 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录9 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee9 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我10 分钟前
React 开发通关指南：用 HTML 的思维写 JS🚀🚀
前端·react.js·html
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南