封装axios api请求
一、 创建utli文件夹并在其中创建文件用来储存拦截器,如图: 这段代在axsio官网有 也可以复制下面的
import axios from "axios"
//创建axsio 赋给常量service
const service = axios.create();
// 添加请求拦截器
service.interceptors.request.use(function (config) {//config是请求时的配置信息。
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {//response参数是响应对象
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service
1.2如果要在请求拦截器里做什么 比如携带token或 给 响应的数据增加一个对象,就复制下面的代码进行相应的修改
import axios from "axios"
//创建axsio 赋给常量service
const service = axios.create();
// 添加请求拦截器
service.interceptors.request.use(function (config) {//config是请求时的配置信息。
//可以修改baseURL
// config.baseURL = "http://localhost:3000";
//可以增加token的携带
// token:是验证身份的。
// 携带token的逻辑:
// 补充:token什么时候存储的?当登录成功时,后端会产生一个token,发给前端,前端拿到token,
// 保存在cookie或者localStorage。
// 在请求拦截器里,就需要携带token给服务器端。
// 1)、(假定存储在localStorage中)从localStorage中获取token
// let token = localStorage.getItem("token");
// if(token){
// config.headers.authorization = token;
// }
// 加loading。
// Loading = true;
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {//response参数是响应对象
// 对响应数据做点什么
// response.data.unshift({"goodsid":"商品编号","goodsname":"商品名称","goodsprice":"商品价格"});//给响应的数据增加一个对象
return response;
}, function (error) {
// 对响应错误做点什么
// console.log('响应出错')
return Promise.reject(error);
});
export default service
二、创建请求封装
新建api文件夹来进行存储,在api文件夹下建立相应的api文件
三、这里就可以在页面调用了