一、首先安装依赖
npm install axios————安装axios
二、引入axios
//utils/request.js导入axios
import axios from 'axios'
三、创建一个实例
// 创建了一个新的axios实例
const service = axios.create({
baseURL: "http://admin-tengxun.net", // 基地址
timeout: 5000 // 请求超时
})
四、配置请求拦截器,响应拦截器
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
}
);
五、导出axios实例
export default service // 导出axios实例
六、封装接口
// 导入封装接口的函数
import request from '@/utils/request.js'
// 获取员工列表
export function getUserList(params) {
return request({
url: `/sys/user`, // 请求地址
method: 'get', // 请求方式
params // 一般get请求,习惯使用params属性来传参!
})
}
// 新增员工列表
export function postUserList(data) {
return request({
url: `/sys/user`,
method: 'post',
data // post使用data传参
})
}
// 删除员工列表
export function delUserList(id) {
return request({
url: `/sys/user/${id}`,
method: 'delete'
})
}
//箭头函数写法
export const getUserList = (params) => {
return request({
url: `/sys/user`,
method: 'get',
params
})
}
七、页面使用接口
![](https://i-blog.csdnimg.cn/blog_migrate/bd43d978017d34c82f215b287d77008c.png)
格外拓展:
1、vue.config.js下配置基地址:
![](https://i-blog.csdnimg.cn/blog_migrate/df2a2aa4bf92b40502068a415e442539.png)
2、合并-导入store携带token
import axios from 'axios' //导入axios
import store from '@/store/index.js' //导入store状态
// 创建了一个新的axios实例
const service = axios.create({
baseURL: "http://ihrm-tengxun.net", // 基地址
timeout: 5000 // 请求超时
})
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
// 请求头携带token
config.headers.Authorization = `Bearer ${store.state.user.token}`
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default service // 导出axios实例