ajax和axios封装

 Ajax

1.ajax理解

ajax是async JavaScript and xml /异步的js和xml

主要用来实现页面的局部刷新

在浏览器里内置了ajxa的核心对象的：XMLHttpRequest

2.如何使用XMLHttpRequest

1.需要对核心对象进行实例化 var 变量=new XMLHttpRequest（）

2.建立链接 变量.open（请求方式，请求路径，同步/异步）

3.发送请求 变量.send（请求的参数）

1. 变 量.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.步骤 

1. 先创建 utils 文件夹

2. 创建 request.js

3. 引入 axios

4. 配置 基本路径和超时时间

5. 配置请求拦截和响应拦截

6. 在请求拦截里可以放 loading 和 token

7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典

8. 最后把我们封装的 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;