axios的封装

一、为什么需要对axios进行二次封装？

1.常见错误信息处理
2.请求头设置
3.api集中管理

二、主要代码

import axios from 'axios' //引入axios
//创建axios
const serviceAxios = axios.create({
    baseURL:'',
    timeout:10000,
})

// 请求拦截
serviceAxios.interceptors.request.use((config)=>{
	//请求配置
	//业务逻辑
    return config
},(err)=>{
    //失败
    Promise.reject(error)
})

// 响应拦截
serviceAxios.interceptors.response.use((res)=>{
},(error)=>{
 let message = '';
 return Promise.reject(message)
})

export default serviceAxios
/*
请求拦截器里面针对token进行处理
响应拦截器里面判断token是否过期
在拦截里面根据业务场景修改请求头
在拦截里面设置全局进度条等
*/

三、全部代码

在http文件夹中的index.js

import axios from 'axios'
import serviceConfig from './config'
import qs from 'qs'
const serviceAxios = axios.create({
    baseURL:serviceConfig.baseURL,
    timeout:10000,
})
// 请求拦截
serviceAxios.interceptors.request.use((config)=>{
    // 请求配置
    //设置请求头
    if (serviceConfig.useTokenAuthorization){
        config.headers['Authorization'] = localStorage.getItem('token')
    }
    if(!config.headers['content-type']){
        if(config.method === 'post'){
            config.headers['content-type'] = 'application/x-www-form-urlencoded'
            config.data = qs.stringify(config.data)
        } else {
            config.headers["content-type"] = "application/json"
        }
    }
    // 业务逻辑
    return config
},(error)=>{
    //失败
    Promise.reject(error)
})
// 响应拦截
serviceAxios.interceptors.response.use((res)=>{
//统一项目中请求返回的数据格式
 let data = res.data
},(error)=>{
 let message = '';
 //统一处理错误码
 if(error && error.response) {
    switch (error.response.status) {
    //所有需要判断的状态码
        case 302:
             message = '接口重定向'
             break;
        case 400:
            message = '参数不正确'
            break;
        case 404:
            message = '请求地址错误'`${error.response.config.url}`
            break;
     }
 }
 return Promise.reject(message)
})

export default serviceAxios

在config文件夹中的index.js中，动态改变地址

const serviceConfig = {
    baseURL:'',
    useTokenAuthorization:true,//是否开启token认证
}
export default serviceConfig;

在api文件夹中统一管理请求接口，比如关于用户的请求都放在user.js中

import serviceAxios from "../index";
export const getUserInfo = (params)=>{
    return serviceAxios({
        method:'get',
        url:'/api/user',
        params
    })
   
}
export const login = (data)=>{
    return serviceAxios({
        method:'post',
        url:'/api/login',
        data
    })
   
}

使用

import { login } from '@/http/api/user'

  mounted(){
    login({}).then({
      
    })
  }

暂未考虑重复请求、重复发送请求、请求缓存