2019-08-16 vue的axios的拦截器，响应器（api的集中处理。统一处理入参和出参）

CHUANGJA.png

Q.png

• axios的baseURL的理解
• 当url设置的详细的时候,那么baseURL无效
• 当url设置为 /list ,那么实际的url 是： baseURL+ "/list" 注意不能有空格。

---

下面为全部代码

• axios.js

import  axios from 'axios'
import { Message,MessageBox} from 'element-ui'

let servie = axios.create({
    baseURL: "基础url", // api的base_url
    timeout: 5000
});
servie.interceptors.request.use(config => {
    // // /判断请求的是登录还是其他的地址
    // if(config.url.indexOf('/login')!=-1){
    //     //登录接口,不做token信息添加
    // }else{
    //     //非登录接口,为了一些权限接口,做token信息添加
    //     config.headers.Authorization = window.sessionStorage.getItem('token');
    // }
    // //返回处理过的axios设置


    config.headers = {
        "token": '4845816131'
    };
    return config;
},error => {
    Promise.reject(error)
});
servie.interceptors.response.use(
    response => {
        var res = response.data;
        var code = response.data.code;
        // console.log(code);
        if (code  !== 200) {
            Message({
                message: res.message,
                type: 'error',
                duration: 3*1000
            })
        }else {
return response.data;
}

    }

)
export default  servie; ///　 一定要记得导出

• api>login.js

import request  from '@/axios/axios'

export function  login (www,hhh) {
    return request({
        //  一个完全的接口
        url:'/qq',
        method: 'post',
        data: {
            usr: www,
            pass: hhh
        }
    })

}

• 在组件中引用

  
  
  

  组件中引用

• 实现，vue的组件和api的接口调用分离，方便维护。

  
  
  

  急.png

    logins () {
            // 在组件中调用拦截器和响应器  通过.then 的方式拿到  响应器的值 ，再通过这个res的值来进行页面的渲染。
          login("用户名", "7412").then(res => {
              console.log(res);
          });;
      },