持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

前言

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

创建封装接口的文件

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

封装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' })
      })
    }

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

😲 但是组件中好像只是修改了一个引入的文件而已，反而还增加了一个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改成一个不存在的网址会怎样。