VUE_axios：请求+拦截器

axios的使用

参考官网：https://www.kancloud.cn/yunye/axios/234845

1 引入

# 安装axios
npm install axios --save

// 给Vue函数添加一个原型属性$axios指向axios（全局使用axios）
// vue实例中直接用this.$axios就可以执行axios方法
Vue.prototype.$axios=axios

2 使用

2.1 get示例

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.2 post示例

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.3 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

2.4 自定义axios请求模板

① 创建模板

import axios from 'axios'
// baseURL---基本路径
var service = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default service

② 使用模板

import service from "@/path";
// get请求，传参id，getUser()
export function getUser(id){
    return service({
        url: "/path",
        method: "get",
        params:{
           id:id
        }
    });
}
// post 请求，传参user对象，login()
export function login(data){
     return service({
        url: "/path",
        method: "post",
        params:{
           data:user
        }
    });
}

3 拦截器

3.1 时机

在请求或响应被then或catch处理前拦截它们

3.2 创建拦截器，代码示例

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

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

3.3 删除拦截器，代码示例

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

3.4 实例

3.4.1 需求

对所有的请求，如果是"/“或者”/login"，不做任何处理，如果不是，给请求头中加上token字段，token的value是根据localStorage中获取

3.4.2 思路

使用axios的请求拦截，请求拦截发生在vue中router.beforeEach()之前

3.4.3 代码示例

//请求拦截器
service.interceptors.request.use(
    (config) => {
        console.log("请求拦截");
        let pathname = location.pathname;
        if(localStorage.getItem('token')){
            if(pathname != '/' &&  pathname != '/login'){
                config.headers.common['token'] = localStorage.getItem('token');
            }
        }
        console.log(config);
        return config;
    },
    (error) => {
        return Promise.reject(error);
    })