我们每次都要请求数据，为了方便后期的维护和修改，我们可以对axios请求进行分装
1、 安装axios插件
npm isntall axios –save
2、 新建request.js文件，用于封装axios
import axios from "axios";
import { getToken } from './auth'
const instance = axios.create({
baseURL: 'http://vue.tpxhm.top/',
timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers['token'] = getToken()
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
/**
* get请求
* @param {*} url 请求地址
* @param {*} param url参数
*/
export function get(url, params){
return instance.get(url,{
params
})
}
/**
* post请求
* @param {*} url 请求地址
* @param {*} data url参数
*/
export function post(url, data){
return instance.post(url,data)
}
/**
* put请求
* @param {*} url 请求地址
* @param {*} data url参数
*/
export function put(url, data){
return instance.put(url,data)
}
/**
* del请求
* @param {*} url 请求地址
*/
export function del(url){
return instance.del(url)
}2、 编写请求接口文件searvice.js// 服务端请求
import { get, post, put, del } from '../utils/request'
/**
* 用户登录
* @param {*} user
* @returns
*/
export function loginApi(user){
return post('api/login', user)
}3、 接口请求实例
loginApi({
username: values.username,
password: values.password,
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）