前言
实战已经开始了！上一篇文章中我们已经成功模拟请求到了登录接口，如果一个组件上的接口比较多的时候，我们就需要把一些公共的东西一直复制，页面上就会多出很多重复的代码。所以本章节会带着大家一起将请求函数封装起来。
创建封装接口的文件
👉 在src目录下面新建一个utils文件夹 - request.js文件
![@B_W7EYP[USWZ]SNOKL`M4Q.png](https://ucc.alicdn.com/pic/developer-ecology/3b44422d75314fd5bc7b1cd90125fb8d.png?x-oss-process=image/resize,w_1400/format,webp "@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](https://ucc.alicdn.com/pic/developer-ecology/cc6411025277488786320cdb0e6f9a55.png?x-oss-process=image/resize,w_1400/format,webp "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) } 复制代码
- 点击登录之后，控制台同样会打印出接口返回数据。
👉 通过接口返回的数据来判断是否登录成功
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改成一个不存在的网址会怎样。
