广东联通通信建设有限公司 网站王烨画家

效果图

官网

起步 | Axios中文文档 | Axios中文网基于promise可以用于浏览器和node.js的网络请求库https://www.axios-http.cn/docs/intro

步骤

1. 创建vue3项目
   npm create vue@latest
    
2. 安装axios
   npm install axios
    
3. 封装
   创建/src/utils/axios.js

   /*** axios请求封装* https://rudon.blog.csdn.net/*/
   import axios from 'axios'// 请求地址前缀
   let baseURL = ''
   if( process.env.NODE_ENV === 'production' ) {// 生产环境baseURL = ''
   } else {// 开发环境baseURL = 'http://本地测试域名/'
   }// 请求拦截器
   // 更多参考 https://www.jb51.net/article/273205.htm
   axios.interceptors.request.use((config) => {// 可选 - 登录token - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorageif (localStorage.getItem('token')) {config.headers['token'] = localStorage.getItem('token')}// 请求超时时间 - 毫秒config.timeout = 10000config.baseURL = baseURLconfig.headers['Content-type'] = 'application/json'return config;
   }, (error) => {return Promise.reject(error)
   })// 响应拦截器
   // 更多参考 https://www.jb51.net/article/273205.htm
   axios.interceptors.response.use((response) => {/*** 可添加请求响应的处理逻辑, 例如接口自定义的response.data.code不是200代表失败。* 错误的话 return Promise.reject(response)* 正确的话 return response*/return response
   }, (error) => {// 可添加请求失败后的处理逻辑return Promise.reject(error)
   })// axios的get请求
   export function getAxios({url, params}) {return new Promise((resolve, reject) => {axios.get(url, {params}).then(res => {resolve(res.data)}).catch(err => {console.log(err)reject(err)})})
   }// axios的post请求
   export function postAxios({url, data}) {return new Promise((resolve, reject) => {axios({url,method: 'post',data}).then(res => {resolve(res.data)}).catch(err => {reject(err)})})
   }export default axios

4. 接口管理
   创建/src/api/xxx.js

   import { getAxios, postAxios } from '@/utils/axios.js'export function apiGetListXX (data) {return postAxios({ url: '/cgi-bin/draft/batchget', data })
   }
   export function apiAddXX (data) {return postAxios({ url: '/cgi-bin/draft/add', data })
   }
   export function apiGetCart () {return getAxios({ url: '/cgi-bin/cart/latest' })
   }

5. 使用接口
   修改/src/views/xx.vue

   <script setup>import { ref, reactive, onMounted } from 'vue'import { apiGetListXX, apiAddXX } from '@/api/xxx.js'onMounted(()=>{apiGetListXX().then(res => {console.log('请求成功')console.log(res)}).catch(e => {console.log('请求失败')console.log(e)}).finally(()=>{console.log('请求结束')})})</script>

参考

Vue.js axios响应拦截如何获取返回状态码_vue.js_脚本之家这篇文章主要介绍了Vue.js axios响应拦截如何获取返回状态码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教https://www.jb51.net/article/273205.htmhttps://segmentfault.com/a/1190000022195227https://segmentfault.com/a/1190000022195227