当前位置:首页 » 《随便一记》 » 正文

vue3中封装axios请求

26 人参与  2024年04月06日 10:55  分类 : 《随便一记》  评论

点击全文阅读


        在 Vue3 中,可以使用 axios 库进行网络请求,并将其封装到一个自定义的函数中以便全局使用。具体实现步骤如下:

1.安装 Axios:可以通过 npm 或 yarn 安装 axios 库。

npm install axios# 或者yarn add axios

2.创建一个 axios 实例并设置默认配置项和拦截器,该文件取名叫request.js

import axios from 'axios'const service = axios.create({  baseURL: process.env.VUE_APP_BASE_API,  timeout: 5000})// request 拦截器service.interceptors.request.use(  config => {    // 在这里可以设置请求头、请求参数等return config  },  error => {    console.log(error)    return Promise.reject(error)  })// response 拦截器service.interceptors.response.use(  response => {    // 在这里处理返回数据const { data } = response    if (data.code !== 200) {      console.error('Error:', data.message)      return Promise.reject(newError(data.message || 'Error'))    } else {      return data    }  },  error => {    console.log(error)    return Promise.reject(error)  })// 封装具体的请求方法: 四种请求类型不和下面的3和4标题内容放在一起export const get = (url, params) => {  return service .get(url, { params });};export const post = (url, data) => {  return service .post(url, data);};export const put = (url, data) => {  return service .put(url, data);};export const delete= (url, data) => {  return service .delete(url, data);};export default service

        在上述代码中,我们创建了一个名为 service 的 axios 实例,并设置了一些默认的配置项和拦截器。其中,request 拦截器用于请求发送前对请求做一些处理,例如设置请求头、请求参数等;response 拦截器用于对返回数据进行处理,例如根据接口返回的状态码判断请求是否成功等。

3.将 axios 封装到一个函数中,api.js

import service from '@/utils/request'export function request(config) {  return service(config)}

        在上述代码中,我们将 axios 封装到一个名为 request 的函数中,并导出该函数,以便在其他地方可以直接调用。

4.在代码中使用封装好的 axios 请求

import { request } from '@/api'request({  url: '/user',  method: 'get'}).then(response => {  console.log(response)})

5.结合request.js中四种请求,代替上面3和4标题

import { get, post,put, delete } from '@/utils/request';// 发送GET请求的示例get('/users', { id: 1 })  .then((response) => {    // 处理响应数据    console.log(response);  })  .catch((error) => {    // 处理请求错误    console.error(error);  });// 发送POST请求的示例post('/users', { name: 'John', age: 25 })  .then((response) => {    // 处理响应数据    console.log(response);  })  .catch((error) => {    // 处理请求错误    console.error(error);  });

         在上述代码中,我们引入封装好的 request 函数,并通过传递一个包含请求参数的配置对象来发起网络请求。

总结

        需要注意的是,在实际应用中,我们可能还需要根据业务需求进一步封装不同类型的请求,例如 GET 请求、POST 请求、PUT请求、DELETE等,以及处理请求错误等情况。


点击全文阅读


本文链接:http://zhangshiyu.com/post/91052.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1