赞
踩
目录
axios 是一个轻量的 HTTP客户端
基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选
(1).从浏览器中创建 XMLHttpRequests
(2).从 node.js 创建 http请求
(3).支持 Promise API
(4).拦截请求和响应
(5).转换请求数据和响应数据
(6).取消请求
(7).自动转换JSON 数据
(8).客户端支持防御XSRF
1.在vue项目中安装axios
npm i axios
2.新建axios.js文件,导入axios,对axios进行二次封装,分别对请求拦截器和响应拦截器进行二次封装,封装后每次都会监测当前localStorage是否有token,如果有token,则在请求头中携带token发送请求。
- import axios from 'axios'
- import { toast } from '~/composables/util'
- import { getToken } from '~/composables/auth'
- import store from '~/store'
- const service = axios.create({
- // 设置的基础路径(根路径),每次发送请求只需要写根路径后面的路径即可,会自动添加根路径
- baseURL: '/api'
- })
-
- // 添加请求拦截器
- service.interceptors.request.use(
- function (config) {
- // 往header头自动添加token
- const token = getToken()
- if (token) {
- config.headers['token'] = token
- }
-
- return config
- },
- function (error) {
- // 对请求错误做些什么
- return Promise.reject(error)
- }
- )
-
- // 添加响应拦截器
- service.interceptors.response.use(
- function (response) {
- // 对响应数据做点什么
- return response.data.data
- },
- function (error) {
- // 对响应错误做点什么
- const msg = error.response.data.msg || '请求失败'
- // token已经失效,依然进行操作,
- if (msg == '非法token,请先登录!') {
- store.dispatch('logout').then((res) => {
- location.reload()
- })
- }
- toast(error.response.data.msg || '请求失败', 'error')
-
- return Promise.reject(error)
- }
- )
-
- export default service
3.在vite.config.js文件中配置代理,解决跨域问题
相当于配置 /api 就是 下面接口的访问路径 http://ceshi13.dishait.cn
- server: {
- proxy: {
- '/api': {
- target: 'http://ceshi13.dishait.cn',
- changeOrigin: true,
- rewrite: (path) => path.replace(/^\/api/, '')
- }
- }
- },
4.在vue文件中直接导入创建的axios文件,发送数据请求
- <script setup>
- import axios from '~/axios.js'
- axios.get('/admin/statistics1').then(res => {
- console.log(res);
- })
- </script>
最终请求到的数据如下
axios 的 API 很友好,你完全可以很轻松地在项目中直接使用。
不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍
这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高我们的代码质量,我们应该在项目中二次封装一下 axios 再使用
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。