Vue项目的axios请求封装

创建实例模板

 //创建一个请求实例
 let instance = axios.create({})
 //为请求实例添加请求拦截器
 instance.interceptors.request.use(
  config =>{
    return config
  },err =>{
  //请求错误 一般http状态码以4开头，常见：401超时，404 not found 多为前端浏览器错误
     return Promise.reject(err)
  }
 )
 instance.interceptors.response.use(
   res=>{
     return res
   },err =>{
     //响应错误,一般http状态码以5开头，500系统错误，502系统重启等，偏向于服务端返回的报错
     return Promise.reject(err)
   }
 )
 ​
 //使用
 instance.get('data').then(res=>{
    console.log(res)
 }).catch(err =>{
     console.log(err)
 })
export default instance

项目实战案例

import axios from "axios";
//引入进度条（必须引入nprogress.css的样式）
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
//创建axios实例对象
const instance = axios.create({
    baseURL:"http://localhost:8080/home", //接口地址仅供参考
    timeout:5000
})

//axios请求拦截器
instance.interceptors.request.use((config) =>{
    Nprogress.start()
    return config;
},error => {
    Nprogress.done()
    return Promise.reject(error)
})

//axios响应拦截器
instance.interceptors.response.use((res) =>{
    Nprogress.done()
    console.log(res.data)
    return res.data;
},error => {
    Nprogress.done()
    return Promise.reject(error)
})

export default instance