VUE项目封装axios请求

安装依赖

 $ npm i axios --save

在 /utils文件夹中创建 request.js文件

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store/index'

创建一个axios实例对象

const service = axios.create({
    # 基础公共访问路径
    baseURL: process.env.VUE_APP_BASE_API, // api || prod-api ## 下章节会介绍
    # 设置超时事件ms
    timeout: 5000
})

设置请求拦截器

service.interceptors.request.use(config => {
    # 如果有 [x-token]则需要添加token
    # [x-token] 一般存储在 store  user子模块中
    if (store.getters.token) { // 建立user token的快捷访问
        config.headers['x-token'] = store.getters.token
    }
    return config
}, error => 
    return Promise.reject(new Error(error))
})

设置响应拦截

service.interceptors.response.use(respons => {
    // axios默认会将返回结果多加一层data
    const { data, success, message } = respons.data
    if (success) { // 成功时将data返回
        return data
    }else {
        Message.error(message) // 提示错误信息
        return Promise.reject(new Error(message))
  }
    
}, error => { 
     if (error && error.response && error.response.data && error.response.data.code === 10002) {
    // 当状态码为10002时, 表示后端告诉前台 token超时了
    store.dispatch('user/logout')
    router.push('/login')
    Message.error('登录已过期, 请重新登录') // 提示错误信息
    return Promise.reject(new Error(error))
  } else {
       Message.error(error.message) // 提示错误信息
       return Promise.reject(new Error(error)) // 返回执行错误, 让当前的执行链跳出成功, 直接进入.catch
  }
})

导出service对象

    export default sevice

创建完成request请求后, 接下来就是引入使用

在src目录下创建一个/api文件夹, 对各个模块的接口进行管理

如: user.js 文件  用户模块

import request from '@/utils/request.js'

export function login(data) {
    return request({
        url: "/sys/login",
        method: "POST",
        data
    })
}

如: permission.js 文件  权限模块

import request from '@/utils/request.js'

export function getPermissionList(params) {
    return request({
        url: "/sys/permission",
        method: "GET",
        params
    })
}

取消请求

import request from '@/utils/request.js' 

const CancelToken = axios.CancelToken
let cancel;

export function getPermissionList(params) {
        cancel? cancel():''
        return request({ 
                url: "/sys/permission",
                method: "GET",
                params,
                cancelToken: new CancelToken(c => cancel = c)
         }) 
 }
 
 ### 在响应拦截中
 service.interceptors.response.use(respons => {}, error => {
    if (axios.isCancel(error)) {
        console.log('Request canceled', thrown.message);
      }
 })

封装好接口后, 就可以直接引入具体的模块中调用了

<script>
    import { login } from '@/api/user'
</scipt>

以上就是对axios进行统一封装, 如有不足请批评指正!!