封装axios异步对象,添加拦截器

1.安装axios

npm i axios

2.创建utils/request.js

import axios from 'axios';

const request = axios.create({
  // baseURL: '/dev-api',
  baseURL: '/',
  timeout: 5000, //请求超时,5000毫秒
});
// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // 请求拦截
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // 响应拦截
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);


export default request;

3.引入使用(在api中)

import request from '@/utils/request'

使用案例

export function test() {

  return request({

    url: '/supplier/list/search/1/2',

    method: 'post'

  })

}

在前端开发中,Axios是一个常用的HTTP请求库,它可以帮助我们发送异步请求并处理返回的数据。为了优化代码的可维护性和复用性,我们可以对Axios进行封装,并使用拦截器来处理请求和响应。 下面是一个简单的Axios封装拦截器的示例: 首先,我们可以创建一个axios.js文件,用于封装Axios: ```javascript import axios from 'axios'; // 创建一个实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置基本URL timeout: 5000 // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( config => { // 在发送请求之前可以对请求做一些处理,比如添加请求头 config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, error => { // 处理请求错误 console.error('Request Error:', error); return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( response => { // 对响应数据做一些处理,比如解析数据 return response.data; }, error => { // 处理响应错误 console.error('Response Error:', error); return Promise.reject(error); } ); export default instance; ``` 然后,在需要发送请求的地方,我们可以引入封装好的axios实例并使用它来发送请求: ```javascript import axios from './axios'; axios.get('/api/users') .then(response => { // 处理响应数据 console.log(response); }) .catch(error => { // 处理请求错误 console.error(error); }); ``` 通过封装拦截器,我们可以在请求发送之前和响应返回之后对请求进行统一的处理,比如添加请求头、处理错误等。这样可以减少重复的代码,并提高代码的可维护性和复用性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值