vue中axios的二次封装

vue中axios的二次封装

安装axios: npm install axios --save

import axios from 'axios'
 var server = function() {
    var server = axios.create({
        baseURL: '',
        timeout: 10000
    })
   // 请求拦截 后台没有接收到请求 但是浏览器发出请求了 这个可以在拦截器写自己的逻辑或者添加请求头配置
    server.interceptors.request.use(config => {
        // console.log(config)
        // 可以写自己的对应的逻辑 
        // config.headers['my-token'] = '122fdasdjfawpoekroqp2k3l4maeid0woqke'(这里是模拟给请求头添加一条属性发送给后台)
        // return 之后接口才会真正的连接后台接口 进行请求
        return config
    })
    //响应拦截 在后台给出相应数据后 在这里可以对数据进行预处理 还可以对错误代码字典进行预处理
    server.interceptors.response.use(response => {
        // console.log(response)
        // switch(response)
        // 可以写自己的判断逻辑
        return response.data.data
    }, (error) =>{
        console.log(error)
        switch(error) {
            case 404:
                alert('请求地址错误')
            break;
            case 500:
                alert('服务器错误')
            break;
        }
    })
}
export default server

设置请求头的意思就是 请求头中有自己的默认设置信息 例如 请求头中的参数内容类型默认为json类型 我们必要时可以设置成表单提交类型再比如 我们在通常项目中 用户的权限会涉及到token token需要携带在请求头中 则可以登录成功后获取的token加入到请求头中 例如 config.headers[‘my-token’] = ‘122fdasdjfawpoekroqp2k3l4maeid0woqke’
然后在src文件夹下创建api文件夹(文件夹可以随意命名) 在该文件夹下创建自己的api请求集合文件 (文件名称可以随意命名)然后导出自己的api集合 然后在需要api的文件夹中 导入对应的api

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值