ajax和axios封装
1.需要对核心对象进行实例化 var 变量=new XMLHttpRequest()ajax是async JavaScript and xml /异步的js和xml。if(变量.readystate==4&&变量.status==200){变 量.onreadystatechange=function(){在浏览器里内置了ajxa的核心对象的:XMLHttpRequest。2.建立链接 变量.op
·
Ajax
1.ajax理解
ajax是async JavaScript and xml /异步的js和xml
主要用来实现页面的局部刷新
在浏览器里内置了ajxa的核心对象的:XMLHttpRequest
2.如何使用XMLHttpRequest
1.需要对核心对象进行实例化 var 变量=new XMLHttpRequest()
2.建立链接 变量.open(请求方式,请求路径,同步/异步)
3.发送请求 变量.send(请求的参数)
-
变 量.onreadystatechange=function(){
if(变量.readystate==4&&变量.status==200){
}
}
代码片段
var xhr = new XMLHttpRequest()
xhr.open('GET','路径')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(JSON.parse(xhr.response))
}
}
axios封装
1.步骤
-
先创建 utils 文件夹
-
创建 request.js
-
引入 axios
-
配置 基本路径和超时时间
-
配置请求拦截和响应拦截
-
在请求拦截里可以放 loading 和 token
-
在响应拦截中 可以 清除 loading 还有处理错误编码字典
-
最后把我们封装的 axios 实例 导出
2.代码片段
// 引入axios
import axios from "axios";
/**
* 通过axios的create方法创建一个新的axios对象
*/
let axiosInstance = axios.create({
baseURL:'http://175.27.228.178:3434/api/private/v1/',
})
// 添加请求拦截器
axiosInstance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers.Authorization = sessionStorage.getItem("token");
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//导出
export default axiosInstance;
更多推荐
已为社区贡献1条内容
所有评论(0)