简单封装axios

封装axios

axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护

文件

一般来讲，新建一个http.js文件用来封装axios，剩下的xxxAPI.JS文件来统一管理调用的api

使用

xxxAPI.js文件：
import {get, post } from '@/api/http'
export default {
    loadData: params => get('/ice/getAnimalList/', params), //列表查询
}
xxx.vue文件
import xxxAPI from '@/api/xxxAPI'

loadAjaxFn () {
        xxxAPI.loadData({
          code: cat
        }).then(respones => {
          this.FormData = respones.data
        }).catch(error => {
          alert('error', '查询数据失败')
        })
 },

引入

import axios from 'axios'
import QS from 'qs' //用于序列化参数，方便后台拿到参数

设置环境(使用的ip地址)

/**
 * 设置ip环境
 * 可以切换不同的请求ip
 */

axios.defaults.baseURL = 'xxx'

设置请求超时

/**
 * 设置axios请求超时 10s
 */

axios.defaults.timeout = 10000

设置post默认请求头

/**
 * 设置post默认的请求头
 */

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

设置请求拦截器(让请求头带token，以便后台根据token查看登录是否过期)

/**
 * 设置请求拦截器
 */
axios.interceptors.request.use(
    config => {
        // 为请求对象，添加token验证的authorization字段
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'authorization': '获取token的方法'
        }
        return config;
    },
    error => {
        // Do something with request error
        return Promise.reject(error);
    });

设置响应拦截器(对于返回的状态码进行相应的处理)

/**
 * 设置响应拦截器
 */
axios.interceptors.response.use(
    response => {
        // 根据服务器返回的状态码进行判断吹离
        if (response.status === 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    }, error => {
        // 错误码
        if (error.response.code || error.response.msg) {
            switch (error.response.code) {
                // 401：未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登陆页操作
                case 401:
                    // 处理重定向到登录页的操作,必要时删除token
                    console.error('未登录,请登录')
                    break
                    // 403 token过期
                    // 登录过期对用户进行提示
                    // 清除本地token和清空vuex中token对象
                    // 跳转登录页面
                case 403:
                    // 处理重定向到登录页的操作,必要时删除token
                    console.error('登录过期,请重新登录')
                    break
                    // 404页面不存在或请求不存在
                case 404:
                    console.error('请求不存在')
                    break
                    // 其他错误  直接显示其他错误
                default:
                    console.error('error.data.message')
            }
            return Promise.reject('error.response.msg:', error.response.msg)
        }
        return Promise.reject(error.response);
    });

get请求

/**
 * get方法 对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params
            })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err);
            })
    })
}

post请求

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err);
            })
    })
}

完整代码

import axios from 'axios'
import QS from 'qs'


/**
 * 设置ip环境
 * 可以切换不同的请求ip
 */

axios.defaults.baseURL = 'xxx'

/**
 * 设置axios请求超时 10s
 */

axios.defaults.timeout = 10000

/**
 * 设置post默认的请求头
 */

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

/**
 * 设置请求拦截器
 */
axios.interceptors.request.use(
    config => {
        // 为请求对象，添加token验证的authorization字段
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'authorization': '获取token的方法'
        }
        return config;
    },
    error => {
        // Do something with request error
        return Promise.reject(error);
    });

/**
 * 设置响应拦截器
 */
axios.interceptors.response.use(
    response => {
        // 根据服务器返回的状态码进行判断吹离
        if (response.status === 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    }, error => {
        // 错误码
        if (error.response.code || error.response.msg) {
            switch (error.response.code) {
                // 401：未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登陆页操作
                case 401:
                    // 处理重定向到登录页的操作,必要时删除token
                    console.error('未登录,请登录')
                    break
                    // 403 token过期
                    // 登录过期对用户进行提示
                    // 清除本地token和清空vuex中token对象
                    // 跳转登录页面
                case 403:
                    // 处理重定向到登录页的操作,必要时删除token
                    console.error('登录过期,请重新登录')
                    break
                    // 404页面不存在或请求不存在
                case 404:
                    console.error('请求不存在')
                    break
                    // 其他错误  直接显示其他错误
                default:
                    console.error('error.data.message')
            }
            return Promise.reject('error.response.msg:', error.response.msg)
        }
        return Promise.reject(error.response);
    });

/**
 * get方法 对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params
            })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err);
            })
    })
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err);
            })
    })
}

可以根据需求，继续添加参数是表单的请求和下载文件的请求，简单的封装就这样。