jquery和ajax的区别
jquery就是对原生js的一个扩展,封装,就是让js更方便更好用
ajax是异步JavaScript和XML
路由懒加载:
整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。
按需去加载路由对应的资源,提高首屏加载速度(tip:首页不用设置懒加载,而且一个页面加载过后再次访问不会重复加载)。
实现原理:将路由相关的组件,不再直接导入了,而是改写成异步组件的写法,只有当函数被调用的时候,才去加载对应的组件内容。
axios是什么路由懒加载写法:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: () => import('@/views/login/index.vue') },
{ path: '/home', component: () => import('@/views/home/home.vue') }
]
})
export default router
axios是什么
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios是如何发起请求的
1.创建xml对象
2.调用open函数
3.调用send函数
4.监听onreadystatechange事件
// 1 创建xhr对象
var xhr = new XMLHttpRequest()
// 2 调用open函数
xhr.open(
'GET',
'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记'
)
// 3调用send函数
xhr.send()
// 监听onreadystatechange事件
xhr.onreadystatechange = function () {
// 监听xhr请求状态(0,1,2,3,4)
// 服务器响应状态 (1xxx,2xxx,3xxx,4xxx,5xxx)
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.response))
// 对响应数据进行处理
}
}
axios拦截器
拦截器介绍
一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。
1.请求拦截器 在请求发送前进行必要操作处理,例如添加统一token、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
2.响应拦截器 同理,响应拦截器也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,比如token的过期处理
什么是axios拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
axios-请求拦截器
发起请求前给每一次请求都带上参数,比如token
// 添加请求拦截器--代码实现案例:仅供参考
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么, 如果vuex里有token携带在请求头中
if (store.state.token.length > 0 && config.headers.Authorization === undefined) {
// 发起请求之前, 把token携带在请求头上(表明自己身份)
config.headers.Authorization = 'Bearer ' + store.state.token
}
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
axios-响应拦截器
状态码:为1xx是临时响应 2xx 3xx表示请求成功 4xx请求错误 5xx服务器错误(一般就是后端错误)
判断状态码是否为401(未授权),是401:
1.清空vuex的token
2.清空本地token
3.跳转到登录页面
// 添加响应拦截器--代码实现案例:仅供参考
axios.interceptors.response.use(function (response) { // 当状态码为2xx/3xx开头的进这里
// 对响应数据做点什么
return response
}, async function (error) { // 响应状态码4xx/5xx进这里
// 对响应错误做点什么
if (error.response.status === 401) { // 身份过期/token无效
// 1.清空vuex的token
store.commit('setToken', '')
store.commit('setRefreshToken', '')
// 2. 清空本地token
localStorage.removeItem('token')
localStorage.removeItem('refresh_token')
// 跳转到登录页面登录
router.push({
path: '/login'
})
}
return Promise.reject(error)
})
什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)