一,背景,

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSR

二,场景

     每次都要在请求中加入,token ,判断是否登陆,如果vue系统中,所有的请求都加入token,比较麻烦,

有没有,每次发送求加入,vue 提供了一种方法,拦截器

三,使用与配置

  在config 中,加入  axios.js

import axios from 'axios'

// 配置默认的host,假如你的API host是:http://api.htmlx.club
  

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
if (window.localStorage.getItem('access-token')) {
    config.headers.Authorization = window.localStorage.getItem('access-token');
}
console.log(window.localStorage.getItem('access-token'));
  return config
}, function (error) {
  // 对请求错误做些什么
return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
});

 

 

四,在 main.js 加入配置

import axios from 'axios';
import '../config/axios'
Vue.prototype.$ajax = axios

 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐