vue中封装服务器地址/接口与设置请求头-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中封装服务器地址/接口与设置请求头。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

设置请求头
首先创建一个放置服务器地址的js,如http.js,然后在http.js中引入axios
import 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  //将创建的实例对象保暴露出去,以便其他文件引入

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

点击查看代码

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的格式

到了这里，关于vue中封装服务器地址/接口与设置请求头的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！