设备建设网站,永久免费网站建设系统,小型网站开发,门店销售管理系统Vue 中简易封装网络请求#xff08;Axios#xff09;#xff0c;包含请求拦截器和响应拦截器 axios简介 Axios 是一个基于 promise 的网络请求库#xff0c;可以用于浏览器和 node.js Axios官方中文文档 特性 从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求支…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 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中引入使用 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?ID12345).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);});