Vue 中簡易封裝網絡請求（Axios），包含請求攔截器和響應攔截器

axios簡介

Axios 是一個基于 promise 的網絡請求庫，可以用于瀏覽器和 node.js

Axios官方中文文檔

特性

• 從瀏覽器創(chuàng)建 XMLHttpRequests
• 從 node.js 創(chuàng)建 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 設置帶寬限制
• 兼容符合規(guī)范的 FormData 和 Blob（包括 node.js）
• 客戶端支持防御XSRF

安裝

npm install axios;

示例代碼

https.js

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) => {// 在發(fā)送請求之前做些什么// if (token) {//   config.headers.accessToken = `Bearer ${token}`;// }return config;},(error) => {// 對請求錯誤做些什么// console.log(error);return Promise.reject(error);}
);// 添加響應攔截器
https.interceptors.response.use((response) => {// 2xx 范圍內的狀態(tài)碼都會觸發(fā)該函數。// 對響應數據做點什么// 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 范圍的狀態(tài)碼都會觸發(fā)該函數。console.log(error);// 對響應錯誤做點什么return Promise.reject(error);}
);

在Vue中引入使用

import { https } from "@/api/http";
//GET請求
// 寫過的一個分頁查詢?yōu)槔?/span>
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);});