Vue 中简易封装网络请求(Axios),包含请求拦截器和响应拦截器

Vue 中简易封装网络请求(Axios),包含请求拦截器和响应拦截器

axios简介

Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js

Axios官方中文文档

特性

  • 从浏览器创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为:
    JSON (application/json)
    Multipart / FormData (multipart/form-data)
    URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
  • 为 node.js 设置带宽限制
  • 兼容符合规范的 FormData 和 Blob(包括 node.js)
  • 客户端支持防御XSRF

安装

复制代码
npm install axios;

示例代码

https.js

javascript 复制代码
import axios from "axios";
// const token = localStorage.getItem("accessToken");

export const https = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 15000,
  headers: {},
});

// 添加请求拦截器
https.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // if (token) {
    //   config.headers.accessToken = `Bearer ${token}`;
    // }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    // console.log(error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
https.interceptors.response.use(
  (response) => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // console.log(response);
    if (response.status === 200) {
      // console.log(Promise.resolve(response));
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
    // return response;
  },
  (error) => {
    // 超出 2xx 范围的状态码都会触发该函数。
    console.log(error);
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

在Vue中引入使用

javascript 复制代码
import { https } from "@/api/http";
//GET请求
// 写过的一个分页查询为例
https
  .get("/display", {
    params: {
      pageSize: page.pageSize.value,
      currentPage: page.currentPage.value,
    },
  })
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
  // 另一种写法
 https.get("/display?ID=12345")
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
 
//POST请求
https
  .post("/display", {
  	id: id.value,
  })
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
相关推荐
浪裡遊2 分钟前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿2 分钟前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj3 分钟前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝13 分钟前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia31135 分钟前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion37 分钟前
数组转树:数据结构中的经典问题
前端
呼Lu噜43 分钟前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾1 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*1 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n1 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5