VUE项目整合Axios

       Axios ，是一个基于promise  的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。Axios就是用于发送get、post等请示的。

vue项目使用组件前先引入依赖（注意：axios对node版本有要求，如果最新版本axios报错，可以降低axios版本）

引入依赖：

npm install --save axios

卸载依赖：

npm uninstall --save axios

新增一个js文件来封装axios，在vue项目新增文件夹utils，js文件request.js

request.js文件内容如下：

import axios from 'axios'
import { Message } from 'element-ui'   

//定义服务发送地址
let baseURL = 'http://localhost:8090' 

//定义axios请求
const service = axios.create({
    baseURL: baseURL,
    timeout: 1* 60 * 60 * 1000  //定义超时时间
})

//请示拦截器(请示之前)
service.interceptors.request.use(
    error => {
        config.log(error)
        Promise.reject(error)
    }
)
//请示拦截器(请示之后)   
service.interceptors.response.use(
    response =>{
        const status = response.status
        switch (status) {
            case 400: 
                Message({
                    message: response.message,
                    type: 'error',
                    duration: 5 * 1000,
                    offset: 80,
                    showClose: true
                })
                break
            }
            return response
        },
       //定义错误信息
        error => {
            if(error.message.includes('timeout')) {
                error.message = '请示超时'
                return _relogin(error)
            }
            
            if(!error.response){
                if(error.config.timeout == 10800000) return Promise.resolve()
                error.message = '与服务器通讯失败'
                return _relogin(error)
            }
            
            switch(error.response.status){
                case 400:
                    error.message = '操作失败，数据有误'
                    break
                case 401:
                    error.message = '登录超时'
                    break
                case 403:
                    error.message = '拒绝访问'
                    break
                case 404:
                    error.message = '未找到对应服务'
                    break
                case 408:
                    error.message = '请示超时'
                    break
                case 500:
                    error.message = error.response.data.message
                    break
                case 501:
                    error.message = '服务未实现'
                    break
                case 502:
                    error.message = '网络错误'
                    break
                case 503:
                    error.message = '服务不可用'
                    return _relogin(error)
                case 504:
                    error.message = '网络超时'
                    return _relogin(error)
                case 505:
                    error.message = 'http版本不受支持'
                    break
                default: 
                    error.message = '连接出错'
            }
            Message({
                message: error.message,
                duration: 5 * 1000,
                type: 'error',
                offset: 80,
                showClose: true
            })
            return Promise.reject(error)
}
)

export default service

再新增http.js文件，用于封装get、post请求

http.js文件内容如下：

import request from '@/utils/request'
export function get(path, query) {
    return request({
        url: '/api' + path,
        method: 'get',
        params: query
    })
}

export function post(path, data) {
    return request({
        url: '/api' + path,
        method: 'post',
        data
    })
}

export function put(path, data) {
    return request({
        url: '/api' + path,
        method: 'put',
        data
    })
}

完成以上封装后，使用方法

import { post } from ‘@/api/http’    //在文件中引入http.js文件

 post(‘/****/***后台方法路径’, 请求参数).then(response => {})