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

孙建伟

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

点击查看代码

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

复制代码

我们在登录成功时会获取到类似这样一个结果

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

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

复制代码

来源:https://www.cnblogs.com/wanganli/p/17508192.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！