对axios请求进行封装,设置请求拦截和响应拦截

 开发时需要前后端联调,必不可少的就是前后端的数据通信,其中axios使用最为频繁。虽然,axios原生就能调用接口。但是,在传递参数和接受数据时,原生的那些简单配置就不太能胜任了。譬如,有些接口需要进行鉴权或者其他操作,返回的数据也需要我们来进行处理。于是,对axios进行一些定制的封装就显得尤为重要了。

首先我们需要安装axios,由于开发和线上都需要使用,因此我们需要使用下方的命令进行安装

npm i axios -S

以下是简单的axios的封装示例:

import axios from "axios";

const baseURL = 'http://xxx.com' //配置一个baseURL

// 创建axios通用配置
const instance = axios.create({
    baseURL: baseURL,
    timeout: 3000, //设置过期时间
    timeoutErrorMessage:'接口请求超时,请联系后端!',//请求超时返回错误信息
    headers: { //设置通用请求头
        'X-Custom-Header': 'foobar',
    }
});

// 对请求进行处理
instance.interceptors.request.use((config) => {
    // 请求中携带cookie或者token之类的信息传递给后端进行鉴权操作
    config.headers['Authorization'] = 'Authorization';
    config.headers.common['Token'] = 'Token';
    config.headers.common['x-Cookie'] = document.cookie;
    
    //将请求头处理后返回出去,必须要返回!
    return config
}, (error) => Promise.reject(error))


//对返回值进行处理
instance.interceptors.response.use((response) => {
    // 根据后端返回的状态码等进行特定分析,返回特定的数据                                                                                                           数据
    if (response.data.code === 200) {
        return response.data
    } else {
        return response.data.msg
    }
})

export default instance

然后我们就可以到需要发送请求的页面导入这个js文件。

import fetch from '../utils/request'  //导入封装的axios文件

...

fetch({
    url: '/',
    method: 'GET',
    params: {}
}).then(res => console.log(res))

至此,axios封装就算基本完成了。上面的请求中需要携带的token等可以使用一些第三方库。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值