axios配置
1.安装axios
pnpm add axios或yarn add axios
2.利用axios.create创建一个自定义的axios来使用
参考官网:axios中文文档|axios中文网 | axios
在src/utils文件夹下新建request.js,封装axios模块
先写一个axios实例
import axios from 'axios'
// 创建axios实例,将来对创建出来的实例,进行自定义配置
// 好处:不会污染原始的axios实例
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',//根据需求配置
timeout: 1000,//可以适当延长
headers: { 'X-Custom-Header': 'foobar' }//可以去掉
})
再定义拦截器(复制粘贴后把axios改为instance)
// 自定义配置 - 请求/响应拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么(默认axios会多包装一层data,需要响应拦截器中处理一下)
return response.data
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error)
})
导出
// 导出配置好的实例
export default instance
响应拦截器统一处理错误提示
const res = response.data
if (res.status !== 200) {
// 给提示
Toast(res.message)
// 抛出一个错误的promise
return Promise.reject(res.message)
}
Header参数统一携带Token
注意:如果变量名带有如"-"等特殊字符的,就要写成对象的中括号语法[]
或
import axios from 'axios'
const baseURL = '' //基地址
const instance = axios.create({
//1.基础地址,超时时间
})
instance.interceptors.request.use(
(config) => {
//2.携带token
return config
},
(err) => Promise.reject(err)
)
instance.interceptors.response.use(
(res) => {
//3.处理业务失败
//4.摘取核心响应数据
return res
},
(err) => {
//5.处理401错误
return Promise.reject(err)
}
)
export default instance
根据实际api的需求来填充配置
import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = '' //填写基地址
const instance = axios.create({
//1.基础地址,超时时间
baseURL,
timeout: 10000
})
//请求拦截器
instance.interceptors.request.use(
(config) => {
//2.携带token
const useSrore = useUserStore()
if (useSrore.token) {
config.headers.Authorization = useSrore.token
}
return config
},
(err) => Promise.reject(err)
)
//响应拦截器
instance.interceptors.response.use(
(res) => {
//3.摘取核心响应数据
if (res.data.code === 0) {
return res
}
//4.处理业务失败,给错误提示,抛出错误
ElMessage.error(res.data.message || '服务异常')
return Promise.reject(res.data)
},
(err) => {
//5.处理401错误
//错误的特殊情况=>401 权限不足 或 token 到期=>拦截到登录
if (err.response.status === 401) {
router.push('/login')
}
//错误的默认情况=>只要给提示
ElMessage.error(err.response.data.message || '服务异常')
return Promise.reject(err)
}
)
export default instance //默认导出
export { baseURL } //按需导出
封装api
创建
在src/api文件夹下创建js文件
import request from '@utils/request'
export const userRegisterService = ({ username, password, repassword }) => {
return request.post('/api/reg', { username, password, repassword })
}
或简写为
import request from '@utils/request'
export const userRegisterService = ({ username, password, repassword }) =>
request.post('/api/reg', { username, password, repassword })
文件里可以封装多个接口
调用
import { userRegisterService } from '@/api/user.js'
const register = async () => {
await userRegisterService(formModel.value)
}
请求成功会自动执行后面的语句,请求失败会提示错误信息。
const login = async () => {
await form.value.validate()
const res = await userLoginService(formModel.value)//获取返回信息
console.log('开始登录', res)
}