封装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文件
在这里插入图片描述
三、这里就可以在页面调用了

封装axios api请求

封装axios api请求

猜你喜欢