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.use(function (response) {
    loading.close();
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 封装请求数据的对象方法
class Ajax {
    static Get(url){
        // 通过Promise完成异步操作,将数据进行初步处理输出为Json对象
        var P = new Promise(function(resolve, reject){
            Axios.get(url,Config)
            .then((res)=>{
                //判断后台返回状态码,作出相应行为
                switch(res.data.status){
                    case 0:
                        Notification({
                            title : '错误提示',
                            message : res.data.message,
                            type : 'error'
                        });
                        break;
                    default:
                        resolve(res.data.data);
                        break;
                }
            }).catch((error)=>{
                console.log(error)
                reject(error);
            });
        });
        return P
    }
    static Post(url){
        var P = new Promise(function(resolve, reject){
            Axios.get(url,data,Config)
            .then((res)=>{
                console.log(res.data.data)
                switch(res.data.status){
                    case 0:
                        Notification({
                            title : '错误提示',
                            message : res.data.message,
                            type : 'error'
                        });
                        break;
                    default:
                        resolve(res.data.data);
                        break;
                }
            }).catch((error)=>{
                console.log(error)
                reject(error);
            });
        });
        return P
    }
}
// 将封装好的 Ajax函数方法输出,方便调用
export default Ajax;
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

说好的配置文件,在这里,继续向下看吧。

//Qs 是个数据处理插件,标配
import Qs from 'qs'
export default{
    //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
    url: '/route',

    // 请求方法同上
    method: 'get', // default
    // 基础url前缀,请求数据时,会把baseURL和url拼接为完整的请求路径
    baseURL: 'Router/',
      
    transformRequest: [function (data) {
    // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)
      data = Qs.stringify({});
    return data;
    }],

    transformResponse: [function (data) {
    // 这里提前处理返回的数据

    return data;
    }],

    // 请求头信息
    headers: {'X-Requested-With': 'XMLHttpRequest'},

    // `paramsSerializer` 是一个负责 `params` 序列化的函数
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
    },

    //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错

    //设置超时时间,随意
    timeout: 1000,
    //返回数据类型
    responseType: 'json', // default

    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
    validateStatus: function (status) {
        return status >= 200 && status < 300; // 默认的
    },

    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0,将不会 follow 任何重定向
    maxRedirects: 5, // 默认的
}
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

Axios使用手册 ,这个使用手册里面还有很多参数,看项目情况使用,我这里就不多说了。

                </div>
Logo

前往低代码交流专区

更多推荐