哎,新项目,0-1开始写,前后台需要封装好多工具……
1.步骤
src
根目录下面新建api
文件夹,新建request.js
文件
2.步骤
request.js
引入
import axios from 'axios'
import router from '@/router'
import { Notify } from 'vant'
import { getToken } from '../utils/token'
const http = axios.create({
baseURL: 'http://api.paozha.net',
timeout: '20000'
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
if (getToken()?.length > 0 && config.headers.Authorization === undefined) {
config.headers.Authorization = `Bearer ${getToken()}`
}
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
console.dir(error)
Notify({ type: 'danger', message: '请先登录!' })
if (error.response.status === 401) {
router.push('/login')
}
return Promise.reject(error)
})
export default ({ url, method = 'GET', params = {}, data = {}, headers = {} }) => {
return http({
url,
method,
params,
data,
headers
})
}
3.步骤
api
文件夹下新建index.js
文件
引入requerst.js
import http from './request.js'
// 登录
export const getLogin = ({ mobile, code }) => http({
url: '/v1_0/authorizations',
method: 'POST',
data: {
mobile,
code
}
})
4.步骤
页面引入请求即可
methods: {
async onSubmit (values) {
console.log('submit', values)
this.isloading = true
try {
const res = await getLogin(this.user)
console.log(res)
Notify({ type: 'success', message: '登录成功' })
setToken(res.data.data.token) // 存储token
this.$router.push('/layout/home')
} catch (err) {
Notify({ type: 'danger', message: '账号或密码错误' })
console(err)
}
this.isloading = false
}
}
根据自己需求配置哦:具体可参考文档http://www.axios-js.com/zh-cn/docs/