vue3项目axios最简单封装-ajax请求封装

效果图

官网

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

步骤 创建vue3项目 npm create vue@latest  安装axios npm install axios  封装 创建/src/utils/axios.js /** * axios请求封装 * rudon.blog.csdn.net/ */ import axios from 'axios' // 请求地址前缀 let baseURL = '' if( process.env.NODE_ENV === 'production' ) { // 生产环境 baseURL = '' } else { // 开发环境 baseURL = 'http://本地测试域名/' } // 请求拦截器 // 更多参考 .jb51.net/article/273205.htm axios.interceptors.request.use((config) => { // 可选 - 登录token - developer.mozilla.org/en-US/docs/Web/API/Window/localStorage if (localStorage.getItem('token')) { config.headers['token'] = localStorage.getItem('token') } // 请求超时时间 - 毫秒 config.timeout = 10000 config.baseURL = baseURL config.headers['Content-type'] = 'application/json' return config; }, (error) => { return Promise.reject(error) }) // 响应拦截器 // 更多参考 .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 接口管理 创建/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' }) } 使用接口 修改/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响应拦截如何获取返回状态码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 .jb51.net/article/273205.htm segmentfault /a/1190000022195227 segmentfault /a/1190000022195227