vue3.0的usecookies的封装步骤

首先去官网引入进项目:

第一个引入:

npm i @vueuse/integrations

第二个引入:

npm i universal-cookie

在公共文件夹(composables)下面创建一个js文件

// 引入下载好的useCookies
import { useCookies } from '@vueuse/integrations/useCookies'

const Tokenkey = "admin-token"
const cookie = useCookies()

// 获取token
    export function getToken(){
        return cookie.get(Tokenkey)
    }


// 设置token
    export function setToken(token){
        return cookie.set(Tokenkey, token)
    }


// 清除token
    export function removeToken(){
        return cookie.remove(Tokenkey)
    }

Vue3.0 中,我们可以使用 axios 库来发送网络请求。为了更好地管理和封装网络请求,我们可以将 axios 的一些常用配置和方法进行封装,以便在多个组件中进行调用。 下面是一个简单的 axios 封装示例: ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000 }) instance.interceptors.request.use(config => { // 在请求发送之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) instance.interceptors.response.use(response => { // 对响应数据做些什么 return response.data }, error => { // 对响应错误做些什么 return Promise.reject(error) }) export default { get(url, params) { return instance.get(url, { params }) }, post(url, data) { return instance.post(url, data) } } ``` 在上面的代码中,我们首先使用 `axios.create` 方法创建了一个 axios 实例,并对实例的一些常用配置进行了设置,如 `baseURL` 和 `timeout`。然后,我们使用 `interceptors` 对请求和响应进行拦截处理,以便在请求发送和响应返回时做一些额外的操作,如在请求发送之前添加请求头信息,或者在响应返回时对响应数据进行解析。 最后,我们将封装好的请求方法暴露出去,并使用 `instance.get` 和 `instance.post` 方法来发送 GET 和 POST 请求。 使用时,我们只需要在组件中引入封装好的请求方法,并调用即可: ```javascript import request from '@/api/request' export default { methods: { fetchData() { request.get('/api/data', { page: 1, size: 10 }).then(res => { console.log(res) }) } } } ``` 在上面的代码中,我们先引入了封装好的请求方法,并在方法中调用了 `request.get` 方法来发送 GET 请求,并传入了请求的 URL 和参数。请求成功后,我们将返回的数据打印到控制台上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

菜鸟、颜小右

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值