axios的封装

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

安装

npm install axios; // 安装axios

引入

首先,新建一个js文件用于引入axios。比如说,新建一个http.js文件,在文件中引入步骤如下所示:

import QS from 'qs';//引入qs模块,为post型数据提供序列化(非常重要)
import { Toast } from 'vant';

#设置请求超时
axios.defaults.timeout = 10000: //设置超时时间为10s```

#设置post请求方式请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

设置请求拦截
首先,导入vuex。因为下面需要使用到里面的状态对象,用于实现登录认证功能。
代码如下:

config => {  
    const token = store.state.token;        
    token && (config.headers.Authorization = token);        
    return config;    
 },    
 error => {        
    return Promise.error(error);    

})

注:在每次发送请求之前判断store中是否存在token,如果存在的话就将其添加到http请求的请求头当中去,用于后台通过token判断用户登录情况。同时,还存在一种情况是,token可能是过期的。所以在响应拦截器中要对返回状态进行判断。(响应拦截下面会讲到)

响应拦截

axios.interceptors.response.use(    
    response => {   
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },    
    error => {            
        if (error.response.status) {            
            switch (error.response.status) {     
            //请求返回的错误妈需要与后台开发人员协商好,以便更快的定位错误。          
                case 401:    //用户未登录       
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;             
                case 403: //token过期
                     Toast({
                        message: '登录已过期,请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                case 404:   //请求错误
                    Toast({
                        message: '该请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                default:  // 其它错误,直接抛出错误提示
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});

/**

  • get方法,对应get请求

  • @param {String} url [请求的url地址]

  • @param {Object} params [请求时携带的参数]
    */

     export function get(url, params){    
         return new Promise((resolve, reject) =>{        
             axios.get(url, {            
                 params: params        
             }).then(res => {
                 resolve(res.data);
             }).catch(err =>{
                 reject(err.data)        
         })    
     });}
    

post方法:原理同get基本一样,但是要注意的是,post方法必须要使用对提交从参数对象进行序列化的操作,所以这里我们通过node的qs模块来序列化我们的参数。这个很重要,如果没有序列化操作,后台是拿不到你提交的数据的。这就是文章开头我们import QS from ‘qs’;的原因。如果不明白序列化是什么意思的,就百度一下吧,答案一大堆。

/**

  • post方法,对应post请求

  • @param {String} url [请求的url地址]

  • @param {Object} params [请求时携带的参数]
    */

     export function post(url, params) {
         return new Promise((resolve, reject) => {
              axios.post(url, QS.stringify(params))
             .then(res => {
                 resolve(res.data);
             })
             .catch(err =>{
                 reject(err.data)
             })
         });
     }
    

这里有个小细节说下,axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是,get的第二个参数是一个{},然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦!

### 如何封装 Axios 以简化 HTTP 请求并增强功能 #### 封装的意义 通过封装 Axios,开发者能够在 Vue 或其他前端框架中统一处理 HTTP 请求,从而提升代码的可维护性和可扩展性。这种封装方式允许配置统一的请求头、拦截器以及错误处理逻辑,减少冗余代码的同时也提高了开发效率[^1]。 --- #### 封装的具体实现步骤 ##### 1. 安装 Axios项目中引入 Axios 是第一步操作。可以通过 npm 或 yarn 进行安装: ```bash npm install axios ``` 或者使用 Yarn: ```bash yarn add axios ``` --- ##### 2. 创建 Axios 实例 为了便于管理和定制化需求,通常会创建一个独立的 Axios 实例,并在此基础上进行进一步封装。 ```javascript // src/utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL 地址 timeout: 5000, // 超时时间 (毫秒) headers: { // 默认请求头 'Content-Type': 'application/json', }, }); export default service; ``` 此部分实现了基本的 Axios 配置,包括 `baseURL` 和超时设置等参数[^3]。 --- ##### 3. 添加请求拦截器 请求拦截器用于在发送请求前对数据或配置进行预处理,例如添加 Token 认证信息或其他公共字段。 ```javascript service.interceptors.request.use( config => { const token = localStorage.getItem('token'); // 假设 Token 存储于本地存储 if (token) { config.headers['Authorization'] = `Bearer ${token}`; // 自动携带认证信息 } return config; }, error => { console.error(error); // 打印错误日志 Promise.reject(error); } ); ``` 这段代码展示了如何动态注入 Token 到请求头部,同时提供了错误捕获机制。 --- ##### 4. 添加响应拦截器 响应拦截器负责对接收到的数据进行初步解析和异常处理,确保返回给业务层的是干净的结果。 ```javascript service.interceptors.response.use( response => { const res = response.data; if (res.code && res.code !== 200) { // 如果服务端返回的状态码不正常,则抛出错误 Message.error(res.message || 'Error'); return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; // 返回成功后的数据体 } }, error => { if (error.response) { switch (error.response.status) { case 401: MessageBox.confirm('登录状态已过期,请重新登录', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => { window.location.href = '/login'; // 跳转到登录页 }); break; case 403: Message.error('权限不足'); break; case 404: Message.error('资源未找到'); break; default: Message.error(`服务器内部错误(${error.response.status})`); } } else { Message.error('网络连接失败'); } return Promise.reject(error); } ); ``` 这里不仅完成了常规的成功/失败判断,还针对不同类型的 HTTP 错误进行了个性化提示。 --- ##### 5. 封装通用请求方法 为了让调用更加直观简单,可以提供一些便捷的方法来发起 GET、POST 等常见请求类型。 ```javascript export function get(url, params = {}) { return service.get(url, { params }); } export function post(url, data = {}, options = {}) { return service.post(url, data, options); } ``` 这些函数隐藏了底层细节,使得组件中的实际调用变得非常简洁明了[^2]。 --- ##### 6. 使用封装好的 Axios 实例 最后,在任何需要的地方都可以轻松导入并利用这个经过优化过的工具库完成各种 API 的交互工作。 ```javascript import { get, post } from '@/utils/request'; get('/api/user/info').then(response => { console.log('User Info:', response); }); post('/api/login', { username: 'admin', password: 'password' }) .then(response => { console.log('Login Success:', response); }) .catch(err => { console.error('Login Failed:', err); }); ``` 以上例子说明了如何快速集成封装Axios 来执行具体的接口访问任务。 --- #### 总结 通过对 Axios 的全面封装,不仅可以显著降低重复劳动量,还能有效改善项目的整体架构质量。无论是简单的 CRUD 操作还是复杂的跨域通信场景,都能从中受益匪浅[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值