axios功能增强、请求拦截器、响应拦截器

该代码段展示了如何在JavaScript中使用axios库设置基础URL,并添加请求与响应拦截器来处理请求头的token以及展示Element-UI的Message提示。拦截器用于在发送请求前添加令牌,并在接收到响应后处理错误信息和显示状态消息。
```javascript

// 引入axios

import axios from "axios";

import { Message } from "element-ui";

import { Loading } from 'element-ui';

import local from "./local";

// 携带服务器地址

axios.defaults.baseURL = 'http://sell.h5.itsource.cn:8087'

// 拦截器

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

    if (local.get('token')) {

        config.headers.Authorization = 'bearer ' + local.get('token')

    }

    return config;

}, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (res) {

    if (typeof (res.data.code) === "number" || typeof (res.code) === "number")  {

        if (res.data.code === 0 || res.data.code === 200 || res.code === 0) {

            Message.success(res.data.msg)

        } else {

            Message.error(res.data.msg)

        }

    }

    return res;

}, function (error) {

    // 超出 2xx 范围的状态码都会触发该函数。

    // 对响应错误做点什么

    return Promise.reject(error);

});

// 暴露出去(默认的)

export default axios

```
### 配置 Axios 请求头和响应拦截器 #### 定义 Axios 实例并配置默认请求头 为了简化每次发起 HTTP 请求时重复设置相同的选项,在定义 Axios 的实例时可以通过 `defaults` 属性来设定全局性的参数,如基础URL、超时时间和公共的请求头部信息。 ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api base_url timeout: 5000 // request timeout }); ``` 在此基础上,如果希望为所有的请求统一添加特定的HTTP Header字段(例如认证令牌),可以在创建 Axios 实例之后立即对其进行扩展: ```javascript // 设置默认请求头 service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; ``` 上述代码片段展示了如何针对 POST 类型的数据提交操作指定 Content-Type 头部值[^1]。 #### 构建请求拦截器 接下来是关于构建请求拦截器的部分。这允许在实际发出网络请求前执行某些逻辑处理工作,比如向服务器端传递身份验证所需的 Token 或者对请求体中的敏感数据进行加密等预处理动作。 ```javascript // 添加请求拦截器 service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { console.log(error); return Promise.reject(error); } ); ``` 这段 JavaScript 代码实现了当存在本地存储中的有效Token时将其附加到即将发送出去的每一个请求上作为 Authorization 字段的一部分[^2]。 #### 设定响应拦截器 对于来自服务端返回的信息同样可以利用响应拦截器来进行集中式的管理与控制。这样做的好处在于能够在一个地方捕获所有可能发生的异常情况,并采取相应的措施予以应对;同时也方便对接收到的成功响应消息实施进一步加工改造后再交给业务层调用方使用。 ```javascript // 添加响应拦截器 service.interceptors.response.use( response => { const res = response.data; // 如果状态码不是2xx,则认为是失败的 if (!response.status.toString().startsWith('2')) { Message({ message: res.message || 'Error', type: 'error' }); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { console.error('err' + error); // for debug let msg = ''; if (error && error.response) { switch (error.response.status) { case 400: msg = 'Request Error'; break; case 401: msg = 'Unauthorized'; break; case 403: msg = 'Forbidden'; break; case 404: msg = 'Not Found'; break; case 500: msg = 'Server Internal Error'; break; default: msg = 'Connection to server failed.'; } } else { msg = error.message; } Message({ message: msg, type: 'error', duration: 5 * 1000 }); return Promise.reject(error); } ); ``` 此部分代码负责检查每一次接收到的服务端反馈是否正常完成,如果不是则会触发错误提示机制告知用户具体发生了什么问题[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值