Vue使用axios封装请求

随着越来越多的公司和团队以及开发者再使用vue来进行前端开发，无论如何发展http请求还是必不可少的，以前jquery时代我们使用ajax现在依然也可以使用，只是这样的话是不是显得有些不伦不类或者说不是最优的方案；虽有说出现很多的HTTP请求的插件，Axios就是其中最为优秀的代表。今天我们讨论下vue中的axios的使用，先了解以下axios
axios的官网这样解释axios：Promise based HTTP client for the browser and node.js；翻译为：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

浏览器支持

image.png

安装
使用 npm:

npm install axios

使用 bower:

bower install axios

使用 cdn:

如何封详情请参见如下代码

axios.defaults.timeout = 5000;
// axios.defaults.baseURL = process.env.VUE_APP_serverUrl;
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
import axios from 'axios'
import { serialize } from './util'
import { Notification, Message } from 'element-ui'
export default function request(params) {
    const nextParams = { ...params, headers: { ...params.headers } }
    return axios({ ...nextParams })
        .then(checkStatus)
        .then(checkCode)
        .catch(err => {
            // TODO: 报错
            handleError(err)
        })
}
//对返回的data中的code处理
function checkCode(data) {
    if (data.code === 403) {
        store.dispatch('user/FedLogOut').then(() => {
            router.push({ path: '/login' })
        })
        return
    }
}
//处理请求中抛出的错误
function handleError(error) {
    if (error.message.includes('4xx')) {
        Message({
            message: '用户名不存在或者密码错误',
            type: 'error'
        })
    } else if (error.message.includes('4xx')) {
        router.push({ path: '/xxx' })
        Message({
            message: '登陆失效，请重新登陆',
            type: 'error'
        })
    } else {
        Notification.error({
            title: '请求错误',
            message: `xxxxxxxxxxxxx`
        })
    }
}
// HTTPrequest拦截
axios.interceptors.request.use(config => {
    const isToken = (config.headers || {}).isToken === false
    let token = store.getters.access_token ? store.getters.access_token : window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') : ''
    if (token && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + token// token
    }
    // headers中配置serialize为true开启序列化
    if (config.methods === 'post' && config.headers.serialize) {
        config.data = serialize(config.data)
        delete config.data.serialize
    }
    return config
}, error => {
    return Promise.reject(error)
})
// HTTPresponse拦截
axios.interceptors.response.use(res => {
  const status = Number(res.status) || 200
    const message = res.data.msg
    if (res.data.code === XXXXX) {
        Message({
            message: `服务器内部错误,请重试或者联系管理员`,
            type: 'error'
        })
    }
    if (res.data.code && res.data.code !== 0 && res.data.code !== 1) {
        Message({
            message: res.data.msg,
            type: 'error'
        })
    }
    if (status !== 200) {
        return Promise.reject(new Error(message))
    }
    return res
}, err)

使用封装后的axios

import request from '@/util/axios'

export function getMenuTree() {
    return request({
        url: `/xxx/xxx/xx`,
        method: 'POST'
    })
}

以上仅供参考，谢谢支持