Vue项目之Axios数据请求

最新推荐文章于 2024-08-17 20:33:58 发布

ALSNEI

最新推荐文章于 2024-08-17 20:33:58 发布

阅读量2.3k

点赞数 4

分类专栏： Vue JS 文章标签： Vue-Axios 数据请求 ES6 Promise

本文链接：https://blog.csdn.net/alsnei/article/details/73504054

版权

本文分享作者在Vue项目中使用Axios进行数据请求的经验。通过封装Axios为函数，实现请求的便捷调用，并提供了相关的配置文件参考，帮助读者理解和应用Axios。

摘要由CSDN通过智能技术生成

撸了两个月的项目代码，终于可以喘口气，写一下自己在Vue项目中所学习到的经验了。
所有项目都避不开向后台请求数据，而为了响应我们尤大大的倡导，我们项目决定使用 Axios 处理数据请求的问题。下面就是我学到的，贡献大家，希望对你们有所帮助。
Axios使用手册（我就是看着这个边学习边写项目的）

Vue项目中，将Axios封装为一个函数，方便我们以后重复调用

//引入 Axios 
import Axios from 'axios'
//引入 Axios 请求数据所需要的配置文件，这个稍后有答案，很简单
import Config from './Config.js'
//项目中引用了 ElementUI，用加载和提示两个组件，在请求数据时，后返回状态码后的行为
import { Loading } from 'element-ui'
import { Notification } from 'element-ui'

let loading;
// 添加请求拦截器，在请求时，显示 ElementUI 的加载组件
Axios.interceptors.request.use(function (config) {
   
    loading = Loading.service({ fullscreen: true ,text:'疯狂加载中'});
    return config;
  }, function (error) {
   
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器 ，请求结束后，关闭 加载组件
Axios.interceptors.response.