axios 的拦截器

axios 的拦截器

使用 jwt 实现用户认证这篇博客中有用到 axios 的拦截器，今天就来总结总结 axios 是基于 Promise 的 http 库，可以用在浏览器和 node 中

axios 特点

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 客户端支持防御 XSRF

自定义 axios

// myAxios.js
var customAxios = axios.create({
  baseURL: "https://cnodejs.org/api/v1",
  url: "topics?page=1&tab=ask&limit=10&mdrender=true",
  method: "get",
  timeout: 3000,
  params: {
    ID: 12345
  },
  headers: { Authorization: "AUTH_TOKEN" }
});

自定义的参数可参考官网

axios 拦截器

// myAxios.js
// 添加请求拦截器
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("HAS_SET_TOKEN");
    if (token) {
      // Bearer是JWT的认证头部信息
      config.headers.common["Authorization"] = "Bearer " + token;
    }
    // 在发送请求前做些什么
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 添加响应拦截器
axios.interceptors.response.use(
  (response) => {
    // 在响应前做些什么
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在网页中使用

import http from "common/scripts/myAxios";
import axios from "axios";
http.customAxios().then(
  (res) => {
    console.log("myAxios", res);
  },
  (err) => {
    console.log(err);
  }
);
const url = "https://cnodejs.org/api/v1/topics?page=1&tab=ask&limit=10&mdrender=true";
axios.get(url).then(
  (res) => {
    console.log("axios", res);
  },
  (err) => {
    console.log(err);
  }
);