axios官网:起步 | Axios中文文档 | Axios中文网
第一步:先下载安装 npm install axios
第二步:在你的项目src文件下新建一个util文件夹,在其下新建一个名为request.js文件
然后在request.js文件开始写代码啦
//首先,引入axios
import axios from 'axios'
//然后创建axios实例
const http = axios.create({
//设置请求根路径
baseURL:'https://.......',
//设置超时时间 单位是ms
timeout:3000,
})
//在实例上添加请求拦截器和响应拦截器
//(1)请求拦截器
http.interceptors.request.use(config=>{
//在发送请求之前做些什么
//1、设置请求头信息
const token = localStorage.getItem('token')
// 不需要添加token的接口 (比如登录、注册、获取验证码等,具体情况看接口文档)
const whiteURL = ['/register', '/user/authentication', '/login']
// 如果token存在并且不在白名单中
if (token && !whiteURL.includes(config.url)) {
// x-token看接口文档的字段
config.headers['x-token'] = token
}
//2:返回配置信息
return config
},
error => {
// 3:请求错误处理
return Promise.reject(error)
}
)
//(2)响应拦截器
http.interceptors.response.use(
response => {
// 1:对接口异常的数据,需要给用户提示
if (response.data.code === -1) {
ElMessage.error(response.data.message)
return Promise.reject(new Error(response.data.message))
}
// 4.2:token失效
if(response.data.code === -2){
ElMessage.error('登录过期,请重新登录')
localStorage.removeItem('token')
localStorage.removeItem('userInfo')
// 回到登录页
window.location.href = window.location.origin + '/login'
}
return response
},
error => {
// 超出2xx状态码的响应会进入这里
// 4.2:响应错误处理
if (error.response.status === 401) {
ElMessage.error('登录过期,请重新登录')
localStorage.removeItem('token')
localStorage.removeItem('user')
location.reload()
return Promise.reject(error)
}
}
)
//最后导出实例
export default http
第三步:使用,在src下创建一个api文件夹,在其下创建index.js
在index.js文件写入
//导入封装好的axios
import request from '../utils/request'
// 登录
export const login = (data) => {
return request.post('/login', data)
}
..............
在项目中
import {login } from "../../api";
login({传参}).then(({data})=>{
console.log(data)
...........
})