参考网址:http://www.axios-js.com/zh-cn/docs/#axios-create-config
理和增强代码的可读性,我们经常需要对axios进行封装。
我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)
一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用
目标:将 axios 请求方法,封装到 request 模块
npm i axios
// 或
yarn add axios
新建 utils/request.js
封装 axios 模块
利用 axios.create 创建一个自定义的 axios 来使用
参考:http://www.axios-js.com/zh-cn/docs/#axios-create-config
如下封装代码:
import store from '@/store'
import axios from 'axios'
import { Toast } from 'vant'
const instance = axios.create({
// 基础地址
baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
// 超时时间
timeout: 5000
// headers: { 'X-Custom-Header': 'foobar' }
})
// 自定义配置
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 添加请求头信息
config.headers.platform = 'H5'
// 开启loading,禁止背景点击(节流处理)
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0 // 不会自动关闭
})
// 添加token到请求头
const token = store.getters.token
if (token) {
config.headers['Access-Token'] = token
}
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
const res = response.data
// console.log(res)
if (res.status !== 200) {
// 弹出提示信息
Toast(res.message)
// 抛出异常
return Promise.reject(res.message)
}
// 去除loading效果
Toast.clear()
// 返回
return res
}, function (error) {
// console.log(error)
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error)
})
// 导出实例
export default instance
import request from '@/utils/request'
// 获取个人信息
export const getUserInfoDetail = () => {
return request.get('/user/info')
}
// 列表
export const getUserList = (userType, page) => {
return request.get('/user/list', {
params: {
userType,
page
}
})
}
// 获取短信验证码
export const getSmsCode = (captchaCode, captchaKey, mobile) => {
return request.post('/captcha/sendSmsCaptcha', {
form: {
captchaCode,
captchaKey,
mobile
}
})
}
...
其他测试:
import request from '@/utils/request'
export default {
name: 'LoginPage',
async created () {
const res = await request.get('/captcha/image')
console.log(res)
}
}