当前位置：首页 > news >正文

vue 后台管理之 axios使用及接口拦截响应等

news 来源：原创 2024/9/20 21:35:42

开心是一天，不开心也是一天

文章目录

一、什么是axios？
二、使用 axios
三、拦截器的使用
四、二次封装 get / post 等请求

一、什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

网址： https://www.javasoho.com/axios/index.html#axios-request-config

二、使用 axios

1. 安装

npm install axios

2. 定义

这是定义的一个简易版 js 文件，把 axios 引入进来


import axios from "axios"const service = axios.create({baseURL:import.meta.env.VITE_APP_BASE_API,
})// 添加请求拦截器
service.interceptors.request.use(function (config) {// 成功的请求前return config;}, function (error) {// 请求错误前return Promise.reject(error);});// 添加响应拦截器
service.interceptors.response.use(function (response) {// 响应成功前return response;}, function (error) {// 响应错误前return Promise.reject(error);})export default service

使用 get / post 等请求


import axios from "~/axios" // 更改axios文件路径嗷
export function getConfig(){return axios.get(`/admin/distribution_setting/get`)
}export function setConfig(data){return axios.post(`/admin/distribution_setting/set`,data)
}

三、拦截器的使用

为了方便处理数据，在接口请求前后我们会做一些操作处理
比如在接口请求前，会使用请求拦截器 在每个header 头添加token
在接口响应后，会使用响应拦截器 对响应数据处理一下再返回

四、二次封装 get / post 等请求

默认情况下，axios将JavaScript对象序列化为JSON。要以application / x-www-form-urlencoded格式发送数据，可以使用 qs 库转换，使用前需要安装 qs

import axios from "axios"
import QS from 'qs';const $get = (url, params) => {return new Promise((resolve, reject) => {axios.get(url, {params: params,}).then(res => {resolve(res.data);}).catch(err => {reject(err.data)})});
}const $post = (url, params) => {return new Promise((resolve, reject) => {// QS.stringify(params) 是将对象 序列化成URL的形式，以&进行拼接axios.post(url, QS.stringify(params)) .then(res => {resolve(res.data);}).catch(err => {reject(err.data)})});
}
// Post2 数据格式不用转化，且可以指定头部信息
const $post2 = (url, params, type) => {return new Promise((resolve, reject) => {axios.post(url, params, type).then(res => {resolve(res.data);}).catch(err => {reject(err.data)})});
}
//下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
export default {install: (app) => {app.config.globalProperties['$get'] = $get;app.config.globalProperties['$post'] = $post;app.config.globalProperties['$post2'] = $post2;app.config.globalProperties['$axios'] = axios;}
}