@[toc]

响应拦截器统一配置

响应拦截器是咱们拿到数据的 第一个 “数据流转站”，可以在里面统一处理错误，只要不是 200 默认给提示，抛出错误
utils/request.js

import {
   
    Toast } from 'vant'

...

// 添加响应拦截器
request.interceptors.response.use(function (response) {
   
   
  const res = response.data
  if (res.status !== 200) {
   
   
    Toast(res.message)
    return Promise.reject(res.message)
  }
  // 对响应数据做点什么
  return res
}, function (error) {
   
   
  // 对响应错误做点什么
  return Promise.reject(error)
})

axios封装

将 axios 请求方法，封装到 request 模块**

1.安装 axios

npm i axios

2.新建 utils/request.js 封装 axios 模块
利用 axios.create 创建一个自定义的 axios 来使用

/* 封装axios用于发送请求 */
import axios from 'axios'

// 创建一个新的axios实例
const request = axios.create({
   
   
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  timeout: 5000
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
   
   
  // 在发送请求之前做些什么
  return config
}, function (error) {
   
   
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
   
   
  // 对响应数据做点什么
  return response.data
}, function (error) {
   
   
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default request

添加请求 loading 效果

1.请求时，打开 loading

// 添加请求拦截器
request.interceptors.request.use(function (config) {
   
   
  // 在发送请求之前做些什么
  Toast.loading({
   
   
    message: '请求中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0
  })
  return config
}, function (error) {
   
   
  // 对请求错误做些什么
  return Promise.reject(error)
})

2.响应时，关闭 loading

// 添加响应拦截器
request.interceptors.response.use(function (response) {
   
   
  const res = response.data
  if (res.status !== 200) {
   
   
    Toast(res.message)
    return Promise.reject(res.message)
  } else {
   
   
    // 清除 loading 中的效果
    Toast.clear()
  }
  // 对响应数据做点什么
  return res
}, function (error) {
   
   
  // 对响应错误做点什么
  return Promise.reject(error)
})

封装api接口

1.将请求封装成方法，统一存放到 api 模块，与页面分离
2.具体实现
新建 api/login.js 提供获取图形验证码 Api 函数

图形验证码的接口

import request from '@/utils/request'

// 获取图形验证码
export const getPicCode = () => {
   
   
  return request.get('/captcha/image')
}

login/index.vue页面中调用测试

async getPicCode () {
   
   
  const {
   
    data: {
   
    base64, key } } = await getPicCode()
  this.picUrl = base64
  this.picKey = key
},

async created () {
   
   
  this.getPicCode()
},
data () {
   
   
  return {
   
   
    picUrl: '',
    picKey: ''
  }
},
methods: {
   
   
  // 获取图形验证码
  async getPicCode () {
   
   
    const {
   
    data: {
   
    base64, key } } = await request.get('/captcha/image')
    this.picUrl = base64
    this.picKey = key
  }
}

create方法，在页面还未渲染成html前，调用函数，从后端获取数据，在实现对页面的数据进行显示

短信验证码的接口

export const getMsgCode = (captchaCode, captchaKey, mobile) => {
   
   
  return request.post('/captcha/sendSmsCaptcha', {
   
   
    form: {
   
   
      captchaCode,
      captchaKey,
      mobile
    }
  })
}

 await getMsgCode(this.picCode, this.picKey, this.mobile)

若是有参数的后端接口，在调用时这样传递参数

总结

在登录的组件中，data里存着需要用到的数据，方便使用

生命周期钩子，页面未渲染前就获得后端数据

定义方法，用异步

实现双向绑定，相当于input+value