vue封装axios的基本步骤

1.安装axios

npm i axios@0.26.1

2.在src的utils目录下新建request.js文件

import axios from 'axios'
import store from '../store'

const request = axios.create({
	baseURL: 'http://127.0.0.1:3000',
	timeout: 5000
})

//添加请求拦截器，若token存在则在请求头中加token，不存在也继续请求
request.interceptors.request.use(
    config => {
        // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token
        // Authorization是必须的
        if (store.state.user.token) {
            config.headers.Authorization = store.getters['user/get_token']
        }
        return config
    },
    error => {
        console.log("在request拦截器显示错误：", error.response)
        return Promise.reject(error);
    }
);

//respone拦截器
request.interceptors.response.use(
    response => {
        // 在status正确的情况下，status不正确则返回对应的错误信息（后台自定义为0是正确，并且将错误信息写在message），正确则返回响应
        return response.data.status === 0 ? response : Promise.reject(response.data.message);
    },
    error => { 
        // 在status不正确的情况下，判别status状态码给出对应响应
        if (error.response) {
            console.log("在respone拦截器显示错误：", error.response)
            switch (error.response.status) {
                case 401:
                    //可能是token过期，清除token
                    store.commit('user/DEL_TOKEN')

                    router.replace({ //跳转到登录页面
                        path: '/login',
                         // 将跳转的路由path作为参数，登录成功后跳转到该路由
                        query: { redirect: router.currentRoute.fullPath }
                    })
            }
        }
        return Promise.reject(error.response.data);
    }
)

export default request

3.在src下的api目录下新建user.js文件

/* 
	用户相关api
 */
import request from '../utils/request.js'

export function login (data) {
	return request({
		method: 'POST',
		url: '/user/login',
		data
	})
}

// ......其他用户相关api

4.在src下的api目录下新建index.js文件

import * as user from './user'

export default {
	...user
}

5.在vue文件中调用api接口

methods: {
    // 登录
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) { // 表单验证成功                this.$api.login(this.ruleForm).then(res=>{
		    this.setToken(res.data.token)
		    //判断路由是否带参，带参就去到重定向参数地址，否则就去首页
		    if(this.$route.query.redirect){
		        this.$router.replace({path:this.$route.query.redirect})
		    }else{
		        this.$router.replace({path:'/'})
		    }
                })
            } else { // 表单验证失败
	        return false
	    }
       })
    }
}