vue2.0封装axios公共请求方法(promise)

灰太狼 2023-06-24 11:27 38阅读 0赞

在vue项目src文件夹目录下新建文件夹api，然后在此文件夹下新建axiosConfig.js：

import axios from 'axios'
    import qs from 'qs'
    import {  Toast } from 'vant';
    import router from '../router/index'
    
    // 默认配置
    axios.defaults.withCredentials = false
    // axios.defaults.timeout = 50000
    axios.defaults.headers = {  'X-Requested-With': 'XMLHttpRequest' }
    axios.defaults.baseURL = process.env.API_ROOT
    
    
    // 请求拦截器
    axios.interceptors.request.use(
        config => { 
            if (config.method === 'get') { 
            }
            return config
        },
        err => { 
            Toast.fail('请求错误')
            return Promise.reject(err)
        }
    )
    // 响应拦截器
    axios.interceptors.response.use(
        response => { 
            // 请求成功的时候更新token
            const token = response.headers["authorization"];  // 需要服务器设置 'Access-Control-Expose-Headers' : 'Authorization',
            if (token) { 
                localStorage.setItem('token', token);
            }
    
            return response
        },
        error => { 
            if (error.response && error.response.status === 401) { 
                router.push({ 
                    path: '/login',
                    query: { 
                        url: encodeURIComponent(location.hash.substr(1))
                    }
                })
            } else { 
                Toast({ 
                    message: '请重新进入！' + error,
                    position: 'top',
                    duration: 2000
                })
                console.log(error.response)
            }
            
            return Promise.reject(error)
        }
    )
    // 错误处理
    function checkStatus(response) { 
        return new Promise((resolve, reject) => { 
            if (response.status === 200) { 
                resolve(response.data)
            } else { 
                reject(response.data)
            }
        })
    }
    
    export default { 
        get(url, params) { 
            return axios({ 
                method: 'get',
                url,
                params,
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'Authorization': `${ localStorage.getItem('token')}`
                }
            }).then(checkStatus)
        },
        post(url, data) { 
            return axios({ 
                method: 'post',
                url,
                data: qs.stringify(data),
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'Authorization': `${ localStorage.getItem('token')}`
                }
            }).then(checkStatus)
        },
        put(url, data) { 
            return axios({ 
                method: 'put',
                url,
                data: qs.stringify(data)
            }).then(checkStatus)
        },
        putParams(url, params) { 
            return axios({ 
                method: 'put',
                url,
                params
            }).then(checkStatus)
        },
        putForm(url, data) { 
            return axios({ 
                method: 'put',
                url,
                data: qs.stringify(data),
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            })
        },
        delete(url, params) { 
            return axios({ 
                method: 'delete',
                url,
                params
            }).then(checkStatus)
        }
    
    }

**注意：我项目里用的是有赞的Vant-ui，根据自己的项目需求对此文件进行增删改**，完了之后在main.js引入，然后将这几种请求方式挂在在全局下，就可以在页面中进行请求了。

做人，最重要的是开心嘛，der  
![在这里插入图片描述][20191213171014492.png_pic_center]

[20191213171014492.png_pic_center]: https://img-blog.csdnimg.cn/20191213171014492.png#pic_center