@[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
