向Headers请求头 添加 参数不成功， request和response的主要区别

购物车需求

问题：发请求的时候，获取不到你购物车里面数据，因为服务器不知道你是谁?

• uuid临时游客身份 ==> 创建一个utils文件夹用来存放一些功能性代码

• 在小仓库中调用 生成 uuid的函数，且这个函数返回的uuid永远是同一个

• 因为detail.js中添加购物车的请求api方法，服务器只要求传送两个参数，需要将uuid 通过请求头 Header 带给服务器，所以在请求拦截器中拿到uuid，「引入 store仓库，因为store是默认暴露了各个小仓库，可以直接使用」

Vue 通过 axios请求拦截器 为 Headers 添加 参数 uuid不成功

//请求拦截器:在发请求之前，请求拦截器可以检测到，可以在请求发出去之 前做一些事情
requests.interceptors.response.use((config) => {
    //config: 配置对象，对象里面有一个属性很重要，header请求头

    if (store.state.detail.uuid_token) {
        //请求头添加一个字段(userTempId):和后台老师商量好了
        config.headers.userTempId = store.state.detail.uuid_token;
    }

    // nprogress进度条开始
    nprogress.start()
    return config;
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

原因是  requests.interceptors.request.use((config) => {}) 而不是 requests.interceptors.response.use((config) => {})

request和response的主要区别是

        request   获得用户的请求，比如你将一个字符串发送到服务器就用Request对象的方法接收。
        response  是响应 对象的请求， 对客户端发出的请求作出动态的响应，向客户端发送数据当服务器处理完你的请求信息后，将处理结果发回客户端。

requests.interceptors.request.use((config) => {
    //config: 配置对象，对象里面有一个属性很重要，header请求头

    if (store.state.detail.uuid_token) {
        //请求头添加一个字段(userTempId):和后台老师商量好了
        config.headers.userTempId = store.state.detail.uuid_token;
    }

    // nprogress进度条开始
    nprogress.start()
    return config;
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

完整代码:

<!--1.  utils/uuid_token.js-->
// 起别名的引入方式
import {v4 as uuidv4} from 'uuid'

//随机字符串，且每次执行不能发生变化，游各身份持久存储
export const getUUID=()=>{
  //先从本地存储获职uuid (看一下本地存储里面是否有)
  let uuid_token = localStorage.getItem('UUIDTOKEN');
  //如果没有
  if(!uuid_token){
    //我生成游客临时身份
    uuid_token = uuidv4();
    //本地存储存储一次
    localStorage.setItem('UUIDTOKEN',uuid_token);
  }
} 

<!--2.  store/detail.js-->
// 封装游客身份模块uuid--->生成一个随机字符串(不能在变了)
import {getUUID} from '@/utils/uuid_token'
const state={
  goodInfo:{}
  // 游客临时身份
  uuid_token:getUUID()
}
const mutations={
  GOODINFO(state,goodInfo){
    state.goodInfo=goodInfo
  }
}
const actions={
  async goodInfo({commit},skuId){
    let result=await reqGoodInfo(skuId)
    if(result.code==200){
      commit('GOOINFO',result.data)
    }
  }
}
const getters={}


<!--3. 通过ajax.js 将 uuid发送给服务器-->
 import axios from 'axios';
// 引入进度条插件
// start: 进度条开始 
// done:进度条接收
import nprogress from 'nprogress';
// 引入nprogress进度条的样式
import 'nprogress/nprogress.css';
// 引入 store 的仓库
import store from '@/store'

//1: 利用axios对象的方法create, 去创建一个axios实例
//2: request就是axios,只不过稍微配置一下
let requests = axios.create({
  //配置对 象
  //基础路径，发请求的时候，路径当中会出现api
  baseURL: "/api",
  //代表请求超时的时间5S
  timeout: 5000,
});

//请求拦截器:在发请求之前，请求拦截器可以检测到，可以在请求发出去之 前做一些事情
requests.interceptors.request.use((config) => {
  //config: 配置对象，对象里面有一个属性很重要，header请求头
  if (store.state.detail.uuid_token) {
    //请求头添加一个字段(userTempId):和后台老师商量好 了
    config.headers.userTempId = store.state.detail.uuid_token
  }
  // nprogress进度条开始
  nprogress.start()
  return config;
},  (error)=> {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
requests.interceptors.response.use((res) => {
  //成功的回调函数:服务器相座数据回来以后，响应截器可以橙測到，可以做一些事情
  // nprogress进度条结束
  nprogress.done();
  return res.data;
}, (error) => {
  //响应失败的回调函数
  return Promise.reject(error);
})

// 对外暴露
export default requests;

代码007普通

打赏 收藏 海报 链接