【vue3.0】9.0 某东到家（九）——axios发送登录mock请求、请求函数的封装

后端接口可以写到自己搭建的fast mock网站上。
fast mock官方网站

image.png

在向后台请求数据之前需要在终端安装axios插件：

> npm install axios --save

修改src\views\login\Login.vue:

在fast mock注册一个账号，新建项目，新建接口，就可以测试通过这个mock请求。

    // 登录按钮
    const handleLogin = () => {
      axios
        .post('https://www.fastmock.site/mock/d5dd8d041954390fa7d82aed171865ca/api/user/login', { username: 'username', password: 'password' })
        .then(res => {
          alert('成功！')
        })
        .catch(() => {
          alert('失败！')
        })
    }

和输入框数据绑定：

请求函数的封装

axios请求还可以进一步封装

image.png

再次调整：

现在对axios做一些封装。创建src\utils\request.js：

import axios from 'axios'
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock.site/mock/07065e4dfb5e94e8751933c9f973d95c/mock',
      headers: {
        'Content-Tpye': 'application/json'
      }
    }).then((res) => {
      resolve(res)
    }, err => {
      reject(err)
    })
  })
}

然后修改src\views\login\Login.vue:

还可以更专注于内容本身：
修改src\utils\request.js:

import axios from 'axios'
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data, {
      baseURL: 'https://www.fastmock.site/mock/07065e4dfb5e94e8751933c9f973d95c/mock',
      headers: {
        'Content-Tpye': 'application/json'
      }
    }).then((res) => {
      resolve(res.data)
    }, err => {
      reject(err)
    })
  })
}

然后修改src\views\login\Login.vue: