详解Axios默认配置及创建实例和请求响应拦截器操作(二)

Axios做为一个基于Promise与Ajax的网络请求框架，现在已经是前端网页开发必不可少的便利工具，那么下面就介绍一下关于Axios中默认配置、创建实例对象、请求响应拦截器及取消请求的api操作。

默认配置

关于 Axios 中的默认配置，首先我们可以先回忆一下开发场景，一个 URL 地址后面有多个不同的接口参数，我们每次调用接口时都会去请求这个重复的 URL 路径，亦或者是请求方式总是GET方式，这是一个非常重复的工作。而Axios中的默认配置能够使我们多次使用一个method类型获取多次使用同一个URL地址时不用再写那么繁琐的代码，如名字所示，可以直接使用它的默认配置。

axios.defaults.method = "GET" // 设置默认请求类型为GET
axios.defaults.baseURL = "http://localhost:3000" // 把固定地址存入，设置基础URL
// axios.defaults.params = {id: xxx}
axios.defaults.timeout = 50; // 3秒后还没有获取数据则取消这个请求

btns[0].addEventListener("click", async function () {
	// 此时的请求不受影响
	await axios({
		 url: "/comments/2" // 上面默认配置完成后，这里就不需要写请求类型和url的地址前缀了
	}).then(res => {
		 console.log(res);
	}).catch(err => {
		 console.log(err);
	})
})

创建实例对象

下面我们再联想一个场景，如果一个项目里面需要使用不同的 URL 接口，而且还需要对这些接口进行封装，那么单一的 Axios 想必是不能满足我们的请求了，这个时候我们就需要去创建一个新的 Axios 实例去分工处理接口数据，相当于给不同的网络请求配置不同的代理，我们用到哪个就去使用哪个的代理。

const crossTalk = axios.create({
	// 这里crossTalk与axios对象的功能几乎是一样的，里面写入的内容会被当作默认配置参数
	baseURL: "https://api.apiopen.top/v1",
	timeout: 2000,
	method: "GET"
});
console.log(crossTalk);

// 可以直接当作axios使用
crossTalk({
	url: "/getJke"
}).then(res => {
	console.log(res);
})
// ================
crossTalk("/getJke").then(res => {
	console.log(res);
})

请求响应拦截器

接下来是我们的拦截器，Axios 里配置的请求拦截器会在每次请求发送时都会经过此拦截器，如下所示：

// 添加请求拦截器(interceptors)
axios.interceptors.request.use(function(config) {
	// console.log(config); // 默认会接收到发送请求的所有默认配置对象参数POSt请求
	return config;
}, function(error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

// 添加响应拦截器(interceptors)
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // console.log(response);
    return response.data; // 可以在此时直接对数据返回的数据进行处理
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // console.log(error);
    return Promise.reject(error);
});

现在有这样的一个场景：在第一次登录之后，后端返回的数据中会带上 token ，要求我们以后的每一次的请求都需要在请求头中带上 token 以验证请求者的身份从而获取数据。这样的话请求拦截器就能够派上用场了，我们可以这样写：

// 添加请求拦截器(interceptors)
axios.interceptors.request.use(function(config) {
	const token = localStorage.getItem("token");
    // 携带token --- 将token放在请求头中
    token && (config.headers.Authorization = token);
	return config;
}, function(error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

因为每一次的请求都会经过该拦截器，所以就不用在每次请求中都添加 headers 头部信息了。

请求拦截器和响应拦截器就像关卡一样作为我们的请求发送和数据响应的出口和入口，能够

帮助我们检验数据、携带数据等等操作，大大优化开发效率，在 Axios 二次封装中也是非常重要的存在。

取消请求发送

献上代码：

<body>
  <div class="container marTop">
		<button type="button" class="btn btn-success">（发送请求）Success</button>
		<button type="button" class="btn btn-info">（取消请求）Info</button>
  </div>
</body>
<script>
  const btns = document.querySelectorAll("button");
  let cancel = null;// 声明变量用于向后接收
  // 取消请求发送
  btns[0].addEventListener("click", function () {
		// 用户疯狂点击的时候,先看上次请求是否在继续
		if (cancel) return; // 哦按段上一次请求是否还在继续中

		axios({
			 method: "get",
			 url: "http://localhost:3000/posts/2",
			 // 需要添加配置对象的属性(实例化一个对象)
			 cancelToken: new axios.CancelToken(function (c) {
				  cancel = c; // 只有发送数据请求时, c 的值给cancel
			 })
		}).then(res => {
			 console.log(res);
			 // 只有上一次的请求结果返回或者中途取消了上一次的请求, 才会把cancel变为null, 此时才阔以进入下一次请求
			 // 也就是这次的请求在两秒完成之后才能让你请求下一次,否则你点再多都是白点 --- 节流
			 cancel = null;
		})
  })

  // 绑定取消请求的事件
  btns[1].addEventListener("click", function () {
		// 此时执行cancel函数
		cancel();
		cancel = null;
  })
</script>

希望对于阅读者能够有所帮助！

详解Axios默认配置及创建实例和请求响应拦截器操作(二)

猜你喜欢