get和post请求传参、请求拦截(params-header)

340 阅读1分钟
  1. post请求

    post请求数据放在http请求包body中

 let params = {
       userName: "test",
       password: 123
   }
   
   this.$axios.post('/login', params).then((res)=>{console.log(res)})
  1. get请求 get请求的数据会放在url后
this.$axios.get(`/infoList?id=123`).then((res) => {console.log(res)})
  1. post请求也可以支持params传参,但是get请求没有data方式
 this.$axios({
  
   url: '/api/user/login' ,
   
   method: 'post',
   
   headers: {
   
      'Content-Type': 'application/json'
   },
   
   params:{
   
      username: 'test',
      
      pwd: 'abc'
      
   }
   
}).then((res) => {
  console.log(res)
})

  1. 请求拦截
// 首先下载axios
npm install axios
// main.js 引入axios
import axios form 'axios'
// 创建 axios实例
const instance = axios.create({
    baseUrl: '',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})
// 请求拦截
instance.interceptors.request.use((config) => {
    config.headers['authorization'] = 'token的值'
    const { params: { oaParams } = {} } = config
    if(oaParams){
        config.headers['params-header'] = oaParams;
    }
    ....
    return config;
},
(error) => Promise.reject(error)
)
// 响应拦截
instance.interceptors.response.use((response) => {
     const { data, status } = response;
     if (status === 200) {
       data.success = true;
    }
     if (!data.success) {
      const errMsg = data.msg || '登录授权失败';
      Message({ type: 'error', message: errMsg });
      return Promise.reject(new Error(errMsg));
    }
    return response;
  },
  (error) => Promise.reject(error)
})
  1. 请求拦截中config数据 image.png

  2. 响应拦截中数据

image.png