当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue-axios系列:axios拦截器，配置请求头，配置请求参数

vue-axios系列:axios拦截器，配置请求头，配置请求参数

2020年07月27日  | 移动技术网IT编程  | 我要评论

这里写目录标题

axios拦截器

配置请求头

request.interceptors.request.use(
  config => {
    /**
     * 处理请求头
     * 1.token 2.防刷短信
     */
    if(token){ config.headers.Authorization= JSON.parse(token) }
    //防刷短信(pdd)
    config.headers.AcceptParam = 'application/no-referrer-urlencoded';
    return config
  }, function (error) {
    return Promise.reject(error)
  }
)

在这里插入图片描述

拦截器添加参数-方法1

注意：post请求时需要QS数据格式化，否则报错

import QS from 'qs';

request.interceptors.request.use(
  config => {
    if (config.method == 'post') {
      config.data = {
        ...config.data,
        token: '1234'
      }
      // 需要将数据格式化，否则传到后台就错了
      config.data = QS.stringify(config.data)
    }else if (config.method == 'get') {
      config.params = {
        token: '1234',
        ...config.params
      }
    }
    return config
  }, function (error) {
    return Promise.reject(error)
  }
)

拦截器添加参数-方法2

import QS from 'qs';
request.interceptors.request.use(
  config => {
    if(config.method == 'post'){
      let defaultParams = {token: '123'};
      // 默认值与接口传来的参数进行合并（注：接口参数与默认值不可重复）
      config.data = Object.assign(defaultParams, config.data);
      config.data = QS.stringify(config.data)
    }
    return config
  }, function (error) {
    return Promise.reject(error)
  }
)

本文地址：https://blog.csdn.net/u012570307/article/details/107563997

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网