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

在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