翼度科技»论坛 编程开发 JavaScript 查看内容

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

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15

  • 设置请求头
    首先创建一个放置服务器地址的js,如http.js,然后在http.js中引入axios
    import axios from "axios";
    如果没有axios,需要先安装,npm i axios或者yarn add axois,然后重启服务器
    ...直接上代码
点击查看代码
  1. import axios from "axios";  //导入axios
  2. // 创建请求实例对象
  3. const SERVER  = axios.create({
  4.     baseURL:'ip',  //ip为你的服务器地址
  5.     timeout:12000  //请求超时的时间
  6. })
  7. // 请求拦截器,在里面设置请求头
  8. SERVER.interceptors.request.use((reqconfig)=>{
  9.     // 在请求头进行授权,携带TOKRN给服务器,服务器验证后,根据TOKEN是否有效返回对应结果
  10.     reqconfig.headers.Authorization = localStorage.token;  //这个token是我们在登录成功时获取的结果里面的token,将这个token 存入本地存储,然后在设置请求头时又将它拿出来
  11.     return reqconfig;
  12. })
  13. 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是你封装服务器地址文件的路径
  2. //创建并导出接口
  3. //export const 接口名 = (参数,没有参数就不写,保留括号) => SERVER.请求方式(get?post?..)('接口',参数(没有参数就不写))
  4. export const $_login = (params) => SERVER.post('/users/checkLogin',params)
  5. export const $_login = (params) => SERVER.get('/users/checkLogin',{params})
  6. export const $_login = () => SERVER.get('/users/checkLogin')
  7. //接口名若没有特殊要求,一般写成$_xxx的格式
复制代码
来源:https://www.cnblogs.com/wanganli/p/17508192.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具