vue封装axios

资深Bug开发大师

已于 2022-10-29 15:26:48 修改

阅读量342

点赞数

文章标签： vue.js javascript 前端

于 2022-01-08 10:02:05 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65351601/article/details/122376231

版权

本文介绍了在VueCLI项目中如何对axios进行封装，以提高代码维护性，包括请求和响应拦截，防止重复弹窗错误。通过创建request文件夹、配置config.js、编写http.js和api.js，并在main.js中挂载全局API，最后在组件中便捷调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们使用vuecli做项目时，用到axios来调用后台数据，这个时候我们要对axios进行封装，方便维护，主要请求拦截、响应拦截、组织响应拦截多次弹窗错误

下载

npm instal --save -dev axios

1.src下新建request文件夹

在这里插入图片描述

2.config.js中

主要用来写请求的接口的域名

let url

if (process.env.NODE_ENV == "development") { 
    // 开发环境中
    url = "http://192.168.1.6:8002" 
} else {
    // 生产环境中
    url = "http://127.0.0.1:8002"
}

export default {
    url
}

3.http.js

这个文件重要，封装的都在这里

import config from './config'
import Axios from 'axios';
import router from '../router'

// 引入提示框
import { MessageBox } from 'element-ui'
import { Message } from 'element-ui' 


const axios = Axios.create({
    baseURL: config.url,
    timeout: 150000, // request timeout  
});

let showMsg = true; //阻止错误多次弹窗

// 添加请求拦截器  作用是在请求发送前进行一些操作
axios.interceptors.request.use(
    function(config) {
        let configurl = config.url
        // 获取存储token中的值  
        let userinfo = JSON.parse(localStorage.getItem('userInfo')) || ''
        // 如果有用户信息，就在请求前加token，我这里是接口返回两个token，所以判断了一下对应的接口加对应的token
        if (userinfo) {
            let tokens = userinfo.cli_user.token
            let xcxtoken = userinfo.wx_user.token
                // 在发送请求之前做些什么
            if (tokens && typeof tokens === 'string') { 
                if (configurl.indexOf("/api_wx") != -1) {
                    config.headers.Authorization = 'Bearer ' + xcxtoken; 
                } else {
                    config.headers.Authorization = 'Bearer ' + tokens; 
                }  
            }
        } 
        // 如果一个token，直接使用这个
        // let userinfo = JSON.parse(localStorage.getItem('userInfo')) || ''
        // let tokens = userinfo.token
        // 在发送请求之前做些什么
        // if (tokens && typeof tokens === 'string') {
            // config.headers.token = tokens; 
        // }
        return config;
    },
    function(error) {
        // 抛出错误
        Message.error('请求中错误:' + error);
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器  作用是在接收到响应后进行一些操作
axios.interceptors.response.use(
    function(response) { 
        // 对响应数据做点什么
        if (response.status == 200) {
            if (response.data.code != 0) {
                //阻止弹窗多次弹出
                if(showMsg){
                     MessageBox.alert(response.data.msg, '错误', {
                        confirmButtonText: "确定",
                        type: "error",
                    }).then(() => {
                        if (response.data.code == 401) {
                             localStorage.removeItem("userInfo");
                            router.replace("/login");
                        }
                    }) 
                    showMsg = false
                    setTimeout(() => {
                      showMsg = true;
                    }, 3000);
                }
 
            }
        } else {
            // 获取成功后的错误提示
            MessageBox.alert('系统错误', '错误', {
                confirmButtonText: "确定",
                type: "error",
            })
        }


        return response;
    },
    function(error) {
    	// 在这里还可以进行响应码的判断
    	// switch (error.response.status) {
		//	  case 400:
       	//	  	error.message = '错误请求'
        //	  break;
        //	  case 500:
        // 	 	error.message = '服务器端出错'
       	//      break;
		// }
        // 抛出错误提示
        MessageBox.alert(error, '错误', {
                confirmButtonText: "确定",
                type: "error",
            })
            // 对响应错误做点什么
        return Promise.reject(error);
    }
); 
export default axios

4.api.js

用来存放每个模块的api

//  登陆
import login from './login'

// 主页
import home from './home'
 
export default {
    ...login,
    ...home,
}

5.模块下使用接口

index.js中

import http from '../http.js';

// get请求
let getvip = (params) => {
    return http({
        url: '/grade/grade',
        params
    }) 
}

// post请求
let addvip = (data) => {
    return http({
        method: 'POST',
        url: '/grade/grade',
        data
    })
}

export default {
	getvip,
	addvip
}

6.main.js中挂载全局api

在main.js中挂载全局api，方便使用

// 挂载全局api
import api from './request/api'
Vue.prototype.$api = api

7.在组建中使用

  // 获取列表
    getlist() {
      this.loading = true; 
      this.$api.getvip( this.formInline ).then((res) => {
        this.loading = false;
        if (res.data.code == 1) {
          this.tableData = res.data.data.list; 
        }
      });
    },