request.js

//axios 二次封装
import axios from 'axios'
let instance = axios.create();

function getCookie(key) {
    let arr = document.cookie.split(";"); //[csrfToken=]
    let val = "";
    arr.forEach(item => {
        let bArr = item.split("="); //[csrfToken=]
        if (bArr[0] === key) {
            val = bArr[1]
        }
    })
    return val
}
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //前端登录成功放token  x-csrf-token
    //console.log(config)
    //登录和注册不需要token 拦截前端请求
    let writePath=['/api/login','/api/registry'];
    return writePath.includes(config.url) ? {
        ...config,
        headers: {
            ...config.headers,
            //把token取出来就带过去了,通过document.cookie可以拿到x-csrf-token的值
            "x-csrf-token": getCookie('csrfToken') //取出来csrfToken
        }
    }:{
        ...config,
        headers: {
            ...config.headers,
            //把token取出来就带过去了,通过document.cookie可以拿到x-csrf-token的值
            "x-csrf-token": getCookie('csrfToken') ,//取出来csrfToken
            token:window.localStorage.getItem('token')
        }
    }  
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default {
    get(url, params) {
        return instance.get(url, params)
    },
    post(url, params) {
        return instance.post(url, params)
    },
    put(url, params) {
        return instance.put(url, params)
    }
}
Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面。在 Vue.js 中发送 HTTP 请求通常会使用 Axios 这个库来处理。在项目中,通常会创建一个名为 `request.js` 的文件来封装 Axios,以便在整个应用程序中重复使用。 以下是一个示例的 `request.js` 文件: ```javascript import axios from 'axios'; // 创建一个 Axios 实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置你的 API 基础路径 timeout: 5000 // 设置请求超时时间(单位:毫秒) }); // 添加请求拦截器 instance.interceptors.request.use( function(config) { // 在发送请求之前可以对请求进行处理,如设置请求头等 return config; }, function(error) { // 对请求错误做些处理 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( function(response) { // 对响应数据进行处理 return response.data; }, function(error) { // 对响应错误做些处理 return Promise.reject(error); } ); export default instance; ``` 在这个示例中,我们首先导入了 Axios 库并创建了一个 Axios 实例。我们可以在实例化时设置一些默认配置,如基础路径和超时时间。然后,我们通过 `interceptors` 添加了请求和响应的拦截器,以便在发起请求和处理响应时进行一些通用的操作。 现在,你可以在 Vue 组件中使用 `import request from './request.js';` 来导入这个封装好的 Axios 实例,并在需要发送请求的地方使用它来发送 HTTP 请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故事只若初见

坚持就是胜利

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值