一个简单的axios封装请求例子

//api.js (在src文件下自定义一个api.js)
import axios from "axios"

//创建一个axios对象
//const 创建一个只读文件
const instance = axios.create({
    baseURL:'http://127.0.0.1:8000/',
    //请求超时
    timeout:5000 
})

//请求拦截
//所有的网络请求都会先走这个方法、
instance.interceptors.request.use(
    function(config){
        console.group('全局请求拦截')
        console.log(config)
        console.groupEnd();
        //获取token
        const token = localStorage.getItem('token')
        if(token){
            config.headers.Authorization = "JWT " + token
        }
        
        return config
    },
    function(err){
        return Promise.reject(err)
    }
);


//响应拦截
//所有的网络请求返回数据之后都会先执行此方法
instance.interceptors.response.use(
    function(response){
        console.group('全局响应拦截')
        console.log(response)
        console.groupEnd();  //这是一种格式
        return response
    },
    //如果失败
    function(err){
        //存在请求失败
        if(err.response){
            console.log(err.response)
            //请求失败状态码 == 500
            if(err.response.status==500){
                //跳转到首页
                window.location.href = 'http://127.0.0.1:8080/'
            }
        }
        return Promise.reject(err)

    }
);




// p指给Register 传递的参数
// 一个文件里可以有多个 exprot  
export const Register = p => {return instance.post('regs/',p)}


export const Login = p => {return instance.post('login/',p)}


export const List = p => {return instance.post('list',p)}

//login.vue
<script>
//导入封装好的方法
import { Register,Login,List } from "../api/api"
export default {
    data(){

        return{
            name:'',
            phone:'',
            name2:'',
            password2:'',
            name3:'',
            password3:'',
        }
    },


    methods: {
        
        clicks(index){
			//调用
            Register({username:this.name,phone:this.phone,password:123}).then(res=>{
                console.log(res)
            })


        },

        clicks2(){
            Login({username:this.name2,password:this.password2}).then(res=>{
                console.log(res)
                localStorage.setItem('token',res.data.token)
            })
        },

        click3(){
           List({username:this.name3,password:this.password3}).then(res=>{
               console.log(res)
           }) 
        }

    },
}
</script>

完整的axios封装请求

// http.js
import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:8000/"
axios.defaults.timeout = 1000000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';



axios.interceptors.request.use(    
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = sessionStorage.getItem("jwt_token")   
        console.log(token)  
        if (token){
            config.headers.Authorization = 'JWT '+ token
        }           
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

    


axios.interceptors.response.use(    
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
          
    // 请求失败
    error => {
        if (error.response) {
            // 判断一下返回结果的status == 401？  ==401跳转登录页面。  ！=401passs
            console.log(error.response)
            if(error.response.status===401){
                // 跳转不可以使用this.$router.push方法、
                // this.$router.push({path:'/login'})
                window.location.href="http://127.0.0.1:8080/#/login"
            }else{
                // errorHandle(response.status, response.data.message);
                return Promise.reject(error.response);
            }
            // 请求已发出，但是不在2xx的范围 
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            // store.commit('changeNetwork', false);
            return Promise.reject(error.response);
        }
    });


// 封装xiaos请求  封装axios里的get
export function axios_get(url,params){
    return new Promise(
        (resolve,reject)=>{
            axios.get(url,{params:params})
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}


export function axios_post(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.post(url,JSON.stringify(data))
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

export function axios_put(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.put(url,JSON.stringify(data))
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

export function axios_delete(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.delete(url,{params:data})
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

//api.js
import {axios_get,axios_post,axios_delete,axios_put} from './http.js'

export const jwt_send_get = p  => axios_get("/appjwt/index01/",p)