vue学习日志--4-api基础封装

在utils文件夹下创建request.js文件

引入axios

创建axios实例对象

请求拦截，目的是加入表头的token

响应拦截，判断响应码是正确还是错误

 设置默认请求类型，然后实例化

 然后创建api文件夹下创建index.js

 封装api

全局引入。在main.js文件夹下面写

使用方法

 封装完成，贴出request的代码

/**
*axios 二次封装
*/
import axios from "axios"
import { ElMessage } from "element-plus";
import config  from "./../config"
import router from "../router";

// 创建axios实例对象，添加全局配置
const service =axios.create({
    // baseURL:config.baseApi,
    baseURL:"http://xxxxxx/",
    timeout:8000,
}) 

// 请求拦截
service.interceptors.request.use((req)=>{
    const headers = req.headers;
    
    if(!headers.Authorization) headers.Authorization = 'Bearer ' +localStorage.getItem('token')
    return req;
})

// 响应拦截
service.interceptors.response.use((res)=>{
   const {code ,data,msg} = res.data
   if(code ===200){
       return data
   }else if(code === 40001){
    //    ElMessage.error('token过期')
    router.push('/login')
    //    setTimeout(()=>{
    //     router.push('/login')
    //    },1000)
       return Promise.reject('token过期')
   }else{
    ElMessage.error(msg || '网络异常')
    return Promise.reject(msg || '网络异常')
   }
})

function request(options){
    options.method = options.method || 'get'
    if(options.method.toLowerCase() === 'get'){
        options.params = options.data
    }

    
    return service(options)
}

export default request