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