request页面的代码逻辑小记

最新推荐文章于 2024-07-03 14:38:59 发布

llllinuuu

最新推荐文章于 2024-07-03 14:38:59 发布

阅读量97

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/llllinuuu/article/details/130667354

版权

文章目录

AXIOS设置基地址

1.安装axios

npm i axios

2.在main.js引入axios

import axios from ‘axios’

3.全局配置axios的请求根路径

axios.defaults.baseURL = ‘http://域名:端口号’;

4.把 axios 挂载到Vue.prototype上，供每个.vue组件的实例直接使用

Vue.prototype.$http = axios;

请求头的设置

在vue中，向后台发送请求，不管是get或post，url要带上userId，headers要带上token值（本地存储的token，window.localStorage[‘token’]）

PS：登录成功后，后台会返回token和userId，存储在本地。但是跳转到其他页面时没有token，会报错undefined，所以每次请求都要带上token值。（每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权，让用户重新登录。）

请求拦截器和响应拦截器

axios的拦截器有请求拦截器和响应拦截器，在请求拦截器中更多的是处理请求发起前需要做的事，而在响应拦截器中更多的是处理响应回来的数据或者验证请求结果等。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;// 注意：这里必须要 return config
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;// 注意：这里必须要 return response
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });