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

2022-10-08 276

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【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改成一个不存在的网址会怎样。

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

前言

创建封装接口的文件

封装post请求

组件中使用封装的请求

baseURL

async/await

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景