【Vue3从零开始-实战】S9:封装axios请求函数

简介: 【Vue3从零开始-实战】S9:封装axios请求函数

@@DVBVTGC2D7ROIYF4YK_@O.png


前言


实战已经开始了!上一篇文章中我们已经成功模拟请求到了登录接口,如果一个组件上的接口比较多的时候,我们就需要把一些公共的东西一直复制,页面上就会多出很多重复的代码。所以本章节会带着大家一起将请求函数封装起来。


创建封装接口的文件


👉 在src目录下面新建一个utils文件夹 - request.js文件


@B_W7EYP[USWZ]SNOKL`M4Q.png


封装post请求


👉 在request.js文件中引入axios


import axios from 'axios'
复制代码


👉 通过export导出封装的post


export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}
复制代码


  • 在封装的接口中,会接收两个参数:url、data(默认为 {}


  • 回调中会返回一个Promise函数。


  • Promise函数里面才是真正的axios.post请求。


  • post请求中同样接收url和data。


组件中使用封装的请求


👉 组件中无须再引入axios了,直接引入封装好的post函数


import { post } from '../../utils/request'
复制代码


👉 handleLogin函数中就可以直接使用post,然后将url和data一并传入


const handleLogin = () => {
      post('https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro/api/user/login', {
        mobile: data.mobile,
        password: data.password
      }).then(() => {
        localStorage.isLogin = true
        router.push({ name: 'Home' })
      })
    }
复制代码


6%YZ)]9FATF4WJED4K7~UZJ.png


  • 此时接口是可以正常调用的,登录成功之后也会直接跳转到首页


😲 但是组件中好像只是修改了一个引入的文件而已,反而还增加了一个request.js文件。下面就来进一步的优化请求接口。


baseURL


🌀 我们可以在调用post函数的时候,将公共的前缀都放到封装的接口中


👉 将post函数中的前缀删掉


const handleLogin = () => {
  post('/api/user/login', {
    mobile: data.mobile,
    password: data.password
  }).then(() => {
    localStorage.isLogin = true
    router.push({ name: 'Home' })
  })
}
复制代码


👉 在axios请求中添加第三个参数,是一个对象,里面可以存放一些axios的配置


export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro'
    }).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}
复制代码

网络异常,图片无法展示
|

async/await


在组件中,我们还是使用的Promise方式去调用的post函数,其实我们也可以用async/await的方式去写。


👉 将handleLogin下面的请求方式改为async/await,并打印出返回值


const handleLogin = async () => {
  const result = await post('/api/user/login', {
    mobile: data.mobile,
    password: data.password
  })
  console.log(result)
}
复制代码


X$KZJ_([EY(4_Z62YS9(SLP.png


  • 点击登录之后,控制台同样会打印出接口返回数据。


👉 通过接口返回的数据来判断是否登录成功


const handleLogin = async () => {
  const result = await post('/api/user/login', {
    mobile: data.mobile,
    password: data.password
  })
  console.log(result)
  if (result.data.code === 0) {
    localStorage.isLogin = true
    router.push({ name: 'Home' })
  } else {
    console.log('登录失败')
  }
}
复制代码


  • 判断result.data.code是否等于0,等于0就跳转到首页


总结


本篇文章主要是和大家一起将axios请求post接口封装起来了,然后把公共链接通过baseURL自动和请求的url拼接起来。


还将原来使用Promise方式请求接口改成async/await的方式去请求接口,同样是可以返回成功的。当然大家也可以试试如何让接口返回登录失败。或者把baseURL改成一个不存在的网址会怎样。

相关文章
|
11天前
|
JavaScript API 开发者
vue自定义Hooks函数使用和封装思想
【8月更文挑战第8天】vue自定义Hooks函数使用和封装思想
38 1
|
5天前
|
Python
axios的get请求传入数组参数
axios的get请求传入数组参数
|
3天前
|
JavaScript API
Vue中如何完成对axios的二次封装、统一接口管理
这篇文章介绍了在Vue项目中如何对axios进行二次封装,实现接口的统一管理和简化请求过程,包括创建api包、编写request.js、在main.js中引入封装好的axios以及在项目中发送请求的方法。
Vue中如何完成对axios的二次封装、统一接口管理
|
10天前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
4天前
Vue3使用createVNode和render函数实现仿 Antd 加载动效
本文展示了如何在Vue3项目中使用`createVNode`和`render`函数实现一个仿Ant Design加载动效的自定义组件,并提供了详细的实现代码和使用示例。
8 0
Vue3使用createVNode和render函数实现仿 Antd 加载动效
|
15天前
|
存储 缓存 JavaScript
Vue中的钩子函数
Vue中的钩子函数
|
19天前
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
|
1月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
121 0
|
1月前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
|
16天前
|
JavaScript 前端开发
vue引入axios出现Module parse failed: Unexpected token (5:2)
vue引入axios出现Module parse failed: Unexpected token (5:2) 页面显示 Cannot GET /