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
相关推荐
独立开阀者_FwtCoder2 分钟前
面试官：为什么在 Vue3 中 ref 变量要用 .value？
前端·javascript·vue.js
NetX行者5 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder5 分钟前
手握两大前端框架，Vercel 再出手拿下 Nuxt.js，对前端有什么影响？
前端·javascript·vue.js
独立开阀者_FwtCoder6 分钟前
弃用 html2canvas！快 93 倍的截图神器！
前端·javascript·vue.js
weixin_3993806920 分钟前
TongWeb8.0.9.0.3部署后端应用，前端访问后端报405（by sy+lqw）
前端
rui锐rui40 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说41 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥42 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia：Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包：双包架构下的性能突围战
javascript·vue.js
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---单例模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07《深入设计模式》模式结构汇总08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）