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

效果图

官网

起步 | 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/localStorage
       if (localStorage.getItem('token')) {
           config.headers['token'] = localStorage.getItem('token')
       }
       // 请求超时时间 - 毫秒
       config.timeout = 10000
       config.baseURL = baseURL
       // 自定义Content-type
       // config.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.post(
               url, 
               data, 
               {
                   headers: {
                       'Content-Type': 'application/x-www-form-urlencoded'
                   }
               }
           ).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