vue3+ts+axios

上一节 - vue3中引入router和vuex

前言：

vue3的出生可谓是万众瞩目，大家都以望子成龙的心态等待。vue3这家伙也不负众望，光芒万丈、开开心心的来到这个世界，它对这个世界的一个声音，不是哇哇啼哭，而是大吼了一声：Hello world！
然鹅，他的大哥vue2就没那么开心，因为老二出生的时候也是这班，一样的期待，一样的宣言；但，现在老三分走了原本属于他的钟爱。奈何，形势所迫，不得不屈服
但老二有时候也有些鄙视老三，玩的还是自己玩过的那套。就比如通信技术，还是自己玩烂的Axios

一、引入Axios

老三可不管这些
第一步：下载axios

npm install axios -S
// or
yarn add axios -S

第二步：在src下面创建utils文件夹，然后在utils里创建了axios.ts文件

// src/axios.ts
import axios from 'axios'
const env = import.meta.env.VITE_API_BASE_URL;
const ConfigBaseURL = env.VITE_APP_BASE_SERVER + env.VITE_API_BASE_URL //默认路径，这里也可以使用env来判断环境
//使用create方法创建axios实例
const Axios = axios.create({
  timeout: 5000, // 请求超时时间
  baseURL: ConfigBaseURL,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// 添加请求拦截器
Axios.interceptors.request.use(config => {
  console.log(config)
  return config
})
// 添加响应拦截器
Axios.interceptors.response.use(response => {
  console.log(response)
  return response.data
}, error => {
  console.log('Response: error', error)
  const msg = error.Message !== undefined error.Message : ''
  // alert(msg)
  return Promise.reject(error)
})

export default Axios;

第三步：简单对axios做了一下封装后，又分别创建src/api文件夹、src/api/user.ts文件

// api/user.ts
import Axios from '@/utils/axios'
const base = import.meta.env.VITE_API_BASE_URL

const Login = (data: {[key: string]: any}) => {
  return Axios.post(base + '/sys/login', data)
}

export default {
  base,
  Login
}

第四步：老三风骚的走位，来到了HelloWorld.vue文件里

// 使用axios通信
import { onMounted } from 'vue'
onMounted(() => {
  User.Login(
    {password: "123456", remember_me: false, username: "admin"}
  ).then(res => {
    console.log('login response data', res)
  })
})

其实我们知道，老三之所以这么风骚，是因为终于迎来了与老二不一样的地方

二、引入mock

• 下载mock

npm i  mockjs -S 
npm i vite-plugin-mock -D
// or
yarn add  mockjs -S 
yarn add vite-plugin-mock -D

• 配置依赖

// 找到vite.config.ts文件，在里面添加如下代码：
import { viteMockServe } from 'vite-plugin-mock'
export default ({mode}) => defineConfig({
  plugins: [vue(), viteMockServe()],
})

• 在项目根目录下面创建mock/user.ts

// mock/user.ts 编写接口
export default [
  {
      url: '/api/getUsers',
      method: 'get',
      response: () => {
          return {
              code: 0,
              message: 'ok',
              data: ['Amy','Tim']
          }
      },
  },
]

• 调用接口

// api/user.ts
const GetUsers = () => {
  return Axios.get('/api/getUsers')
}
export default {
  ...
  GetUsers
}
// 到HelloWorld.vue文件
onMounted(() => {
  ...
  User.GetUsers().then(res => console.log('users inifo:', res))
})

注意：mockjs提供的接口，只是一个更接近真实环境的接口，但不代表它能替代真实接口。最终我们需要后端提供真实接口，和同样的数据结构