vue2 ajax请求封装
·
从零开始搭建项目,使用的是若依的ajax封装,下面是简单的封装模板
import axios from 'axios'
// 创建axios实例
const service = axios.create({
// 请求的基础url 就是开头前缀
baseURL: 'http://123.132/',
// 超时
timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
if (!isToken) {
config.headers['Authorization'] = 'Bearer ' + '后端给你的token' // 添加token
}
return config
},
error => {
// 请求失败的回调
console.log(error)
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
res => {
// 获取返回的状态码
const code = res.data.code
if (code === 200) {
// 请求成功 返回数据
return res.data
} else {
// 请求异常的处理
}
},
error => {
// 处理失败的回调
}
)
// 导出实例
export default service
编写接口
// 引入实例
import request from 'request'
// 方法
export function login(data) {
return request({ // 返回封装好的request
headers: {
isToken: false // 如上封装的是否需要token
},
url: '/login', // 请求的url
method: 'post', // 请求方式
data: data // 参数
})
}
页面中使用
// 引入
import { login } from './login'
// 使用
login(obj).then(response => {
// 处理数据
})
两个拦截器都是两个参数,分别是成功的回调函数和失败的回调函数,在此进行统一处理,非常方便,比如后端会在请求失败时返回具体的提示,我们就可以直接在此统一编程,给用户提示错误信息来优化我们程序的交互
参考若依 若依官网=》若依
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)