vue中封装服务器地址/接口与设置请求头

手机

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

搜狐汽车全球快讯 | 大众汽车最新专利曝光：仪表支持拆卸可用手机、平板替代-环球关注

vue中封装服务器地址/接口与设置请求头

2023-07-01 12:53:09 来源：博客园

(相关资料图)

设置请求头首先创建一个放置服务器地址的js,如http.js,然后在http.js中引入axiosimport axios from "axios";如果没有axios,需要先安装,npm i axios或者yarn add axois,然后重启服务器...直接上代码

点击查看代码

import axios from "axios";  //导入axios// 创建请求实例对象const SERVER  = axios.create({    baseURL:"ip",  //ip为你的服务器地址    timeout:12000  //请求超时的时间})// 请求拦截器,在里面设置请求头SERVER.interceptors.request.use((reqconfig)=>{    // 在请求头进行授权,携带TOKRN给服务器,服务器验证后,根据TOKEN是否有效返回对应结果    reqconfig.headers.Authorization = localStorage.token;  //这个token是我们在登录成功时获取的结果里面的token,将这个token 存入本地存储,然后在设置请求头时又将它拿出来    return reqconfig;})export default SERVER  //将创建的实例对象保暴露出去,以便其他文件引入

我们在登录成功时会获取到类似这样一个结果然后将里面的token存入本地存储localStorage.token = res.data.tokentoken 的一般格式为Bearer eyJhbGciOi.....,但有时候后端可能不会在前面加Bearer,这个时候设置请求头时我们就手动加上,如:reqconfig.headers.Authorization ="Bearer " + localStorage.token; //注意Bearer后面的空格不要漏掉2.封装api接口当我们设置好了请求头,封装好服务器地址后,就可以创建一个apis.js的文件,用来存放所有的接口,这样做的原因是方便维护,如果接口太多,那么每次请求时就要写很多冗余的代码,而且若接口有变,那维护起来是相当的不方便....直接看代码

点击查看代码

import SERVER from "xxxx"  //xxxx是你封装服务器地址文件的路径//创建并导出接口//export const 接口名 = (参数,没有参数就不写,保留括号) => SERVER.请求方式(get?post?..)("接口",参数(没有参数就不写))export const $_login = (params) => SERVER.post("/users/checkLogin",params)export const $_login = (params) => SERVER.get("/users/checkLogin",{params})export const $_login = () => SERVER.get("/users/checkLogin")//接口名若没有特殊要求,一般写成$_xxx的格式

关键词：