Axios进阶

目录

axios实例

axios请求配置

拦截器

请求拦截器

响应拦截器

取消请求


axios不仅仅是简单的用基础请求用法的形式向服务器请求数据,一旦请求的端口与次数变多之后,简单的请求用法会有些许麻烦。所以,axios允许我们进行创建axios实例、axios配置、拦截器、取消请求等操作。

axios实例

后端接口有很多,每个接口中可以获得数据有所不同,我们可以使用不同的axios实例向不同的接口发送请求。

创建axios实例时可以为其设置请求配置,使用该实例发送的请求都i会有相同的部分配置。其配置细节在下面的axios配置中。

axios实例是通过axios.create创建的:

javascript 复制代码
    //使用axios.create创建一个axios实例
    const instance = axios.create({
      //设置baseURL,它会自动添加在发送请求时的url前面
      //使用实例发送请求时便不用书写很长的url
      baseURL: "http://localhost:3000/",
      
      //设置超时时间,如果请求未在该时间范围内完成,则请求失败
      //此处的时间单位是ms
      timeout: 3000
    });

使用axios实例:

javascript 复制代码
instance.get('post').then((res) => {
      console.log(res);
    })

axios请求配置

axios配置是发送请求时的可选项,只有url是必须的,method默认是GET方法。axios配置通常与axios实例结合使用,直接在axios实例中添加配置,对在一个接口的所有请求设置"要求"。

1、baseURL:使用实例发送请求时,baseURL会自动添加在请求的url前面,除非url时绝对路径。

2、headers:自定义请求头。

3、params:请求参数,会与请求一起发送给服务器,服务器通过参数查找数据并返回。

4、data:请求体,包含需要发送的数据,仅适用于"POST"."PUT"."PATCH"."DELETE"方法。

5、timeout:超时时长,单位是毫秒(ms),如果请求超过"timeout"的值,则请求会中断

以上是axios常用的请求配置,想要了解更多,请参考axios请求配置

拦截器

拦截器可以让你在请求发送到服务器之前或响应从服务器返回之后,对请求或响应进行预处理或后处理。这在实现诸如日志记录、身份验证、错误处理、数据转换或重试逻辑等方面特别有用。

axios的拦截分为请求拦截器和响应拦截器。

请求拦截器

请求拦截器故名思意便是对请求进行拦截,在请求发送到服务器之前进行自定义操作,如身份验证、数据转换等。

设置请求拦截器并设置自定义操作:

javascript 复制代码
    //设置请求拦截器,此处的config参数代表请求配置
    axios.interceptors.request.use((config) => {
      //在发送请求之前在控制台上输出
      console.log("请求拦截器 成功");
      return config; //一定要将拦截的config返回。否则无法进行数据请求
    },(err) => {
      //请求错误之后
      console.log("请求拦截器 失败");
      return Promise.reject(err);  //请求错误时的逻辑处理
    });

响应拦截器

响应拦截器故名思意便是对服务器的响应进行拦截,在响应返回之前进行自定义操作。

设置响应拦截器并设置自定义操作:

javascript 复制代码
    //设置响应拦截器,此处的res代表服务器返回的数据对象
    axios.interceptors.response.use((res) => {
      //状态码在 2xx 范围内触发
      console.log("响应拦截器 成功");
      //对响应数据的自定义操作
      return res.data; //只返回res的data
    },(err) => {
      //状态码超出 2xx 范围触发
      console.log("响应拦截器 失败");
      //对响应错误的处理
      return Promise.reject(err);
    });

对服务器发送请求:

javascript 复制代码
    axios.get('http://localhost:3000/post').then((res) => {
      console.log(res);
      console.log("数据请求成功");
    }).catch((err) => {
      console.log(err);
    })

结果:

取消请求

取消请求用于取消正在进行的请求。

由于取消请求我们不常用,所以了解即可。

javascript 复制代码
    const sourse = axios.CancelToken.source();

    axios.get('http://localhost:3000/post',{
      cancelToken: sourse.token
    }).then((res) => {
      console.log(res);
    });
    //取消请求
    sourse.cancel("请求已取消");
相关推荐
清幽竹客28 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim28 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿32 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年33 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js