前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2019-08-16 vue的axios的拦截器,响应器(api的集中处理。统一处理入参和出参)

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

作者头像
用户4344670
发布2019-08-28 11:36:43
1.5K0
发布2019-08-28 11:36:43
举报
文章被收录于专栏:vue的实战vue的实战

CHUANGJA.png

Q.png

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

下面为全部代码

  • axios.js
代码语言:javascript
复制
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
代码语言:javascript
复制
import request  from '@/axios/axios'

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

}
  • 在组件中引用

组件中引用

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

急.png

代码语言:javascript
复制
    logins () {
            // 在组件中调用拦截器和响应器  通过.then 的方式拿到  响应器的值 ,再通过这个res的值来进行页面的渲染。
          login("用户名", "7412").then(res => {
              console.log(res);
          });;
      },
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.08.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档