vue axios 封装

src 里面新建 api 文件夹，里面新建 三个文件

1.request.js

封装的axios

import axios from 'axios'
import { message } from 'ant-design-vue'
import store from '@/store'
import router from '@/router'

const service = axios.create({
    baseURL: '接口地址',
    // url = base api url + request url
    //   withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000, // request timeout
    method: 'POST',
    headers: {
        'content-type': 'application/json'
        // 'application/x-www-form-urlencodedcharset=utf-8',
    }
})

//请求拦截器
service.interceptors.request.use(config => {
    message
        .loading('Action in progress..', 2.5)
        .then(() => message.success('Loading finished', 2.5))
        .then(() => message.info('Loading finished is finished', 2.5))
    const token = store.state.token
    console.log(router)
    if (router.options.routes[0].path == '/') {
        // 登录
        return
    } else {
        if (token) {
            config.headers['token'] = token
            return config
        } else {
            router.replace('/login')
        }
    }
}, error => {       // do something with request error
    console.log(error)  // for debug
    return Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
    //接收到响应数据并成功后的一些共有的处理，关闭loading等

    return response
}, error => {
    /***** 接收到异常响应的处理开始 *****/
    if (error && error.response) {
        // 1.公共错误处理
        // 2.根据响应码具体处理
        switch (error.response.status) {
            case 400:
                error.message = '错误请求'
                break
            case 401:
                error.message = '未授权，请重新登录'
                break
            case 403:
                error.message = '拒绝访问'
                break
            case 404:
                error.message = '请求错误,未找到该资源'
                window.location.href = '/NotFound'
                break
            case 405:
                error.message = '请求方法未允许'
                break
            case 408:
                error.message = '请求超时'
                break
            case 500:
                error.message = '服务器端出错'
                break
            case 501:
                error.message = '网络未实现'
                break
            case 502:
                error.message = '网络错误'
                break
            case 503:
                error.message = '服务不可用'
                break
            case 504:
                error.message = '网络超时'
                break
            case 505:
                error.message = 'http版本不支持该请求'
                break
            default:
                error.message = `连接错误${error.response.status}`
        }
    } else {
        // 超时处理
        if (JSON.stringify(error).includes('timeout')) {
            message.error('服务器响应超时，请刷新当前页')
        }
        error.message = '连接服务器失败'
    }

    /***** 处理结束 *****/
    //如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response)
})


//响应拦截器
// service.interceptors.response.use(res => {
//     setTimeout(loading, 3000)    //关闭loading
//     return Promise.resolve(res)
// }, error => {
//     setTimeout(loading, 3000)
//     console.log('err' + error)
//     return Promise.reject(error)
// })
export default service

2.  api.js

接口地址：  名称+地址

const api = {
    Login: '/user/login',
    // UserInfo: '/user/userinfo',
    UserInfo: '/api/Index/index',
    UserName: '/api/Order/index'
   // 方法名 ：'接口'
}

export default api

3.user.js

引入前两个js文件, 写请求过程

//请求地址
import api from './api'
// axios
import request from './request'

// 登录
export function login(data) {
    return request({
        url: api.Login,
        data
    })
}

// 用户信息 post 方法
export function getUserInfo(data) {
    return request({
        url: api.UserInfo,
        data,
        hideloading: true
    })
}

// 用户名称 get 方法
export function getUserName(params) {
    return request({
        url: api.UserName,
        params,
        hideloading: true
    })
}

* 页面中使用：*

例：about.vue 中：

//可以导入多方法   引入方法名
import { getUserInfo,getUserName } from '../api/user'

 methods:{
    async getbanner(){
      const { data:res } = await getUserInfo()
      let a = res
      console.log(a,'aaaaa')
    },
    async getappIndex(){
      let params = {
        type:0
      }
      const { data:res } = await getUserName(params)
      // this.nav_list = res
      console.log(res,'resres')
     }
  }