二次封装axios

封装axios

项目接口地址链接: linkhttps://www.showdoc.com.cn/jinducasey/8324842968804991
vue.config.js配置代码:

module.exports ={
    devServer:{
        open:true,
        **proxy:{
            '/api':{
                target:'http://1.116.64.64:5004/api2/',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }**
            }
        }
    }
}

service.js

import axios from 'axios'
import {getToken} from '@/utils/setToken.js'
import {Message} from 'element-ui'

const service = axios.create({
    baseURL:'/api',
    timeout:3000 //请求毫秒数,

})
//添加请求拦截器
service.interceptors.request.use((config) => {
    //请求之前做什么(获取并设置token)
    config.headers['token'] = getToken('token')
    return config
},(error) => {
    return Promise.reject(error)
})
// 添加响应拦截器

service.interceptors.response.use((response) => {
    //对响应数据做些什么
    let {status,messege} = response.data
    if(status !== 200){
        Message({message:message|| 'error',type:'warning'})

    }

},(error) => {
    return Promise.reject(error)
})

export default service

main.js

//import axios from 'axios'
//Vue.prototype.axios = axios
import service from './service'
Vue.prototype.service = service

login.vue

methods: {
        login(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    console.log(this.form)
                    **this.service.post('/login',this.form)
                    .then(res =>{
                        console.log(res)
                    })** 
                } else {
                    console.error(this.form)
                }
            })

        }
    }
二次封装axios的作用是在axios的基础上进行进一步的封装和定制,以满足项目的具体需求和提高开发效率。以下是二次封装axios的一些常见作用: 1. 统一处理请求和响应:通过二次封装,可以在请求发送前和响应返回后进行统一的处理,例如添加请求头、设置超时时间、处理错误信息等。这样可以减少代码重复,提高代码的可维护性和可读性。 2. 简化接口调用:通过二次封装,可以将常用的接口请求方法进行封装,提供更简洁的调用方式。例如可以将GET、POST等请求方法进行封装,使得调用接口时只需传入必要的参数即可。 3. 处理请求拦截和响应拦截:通过二次封装,可以对请求进行拦截和处理。例如可以在请求拦截器中添加token验证、权限校验等逻辑;在响应拦截器中对返回的数据进行统一处理,例如对错误码进行判断、对返回数据进行格式化等。 4. 封装错误处理机制:通过二次封装,可以对请求过程中可能出现的错误进行统一处理。例如可以定义一套错误码规范,并在请求出错时返回对应的错误码和错误信息,方便前端进行错误处理和展示。 5. 实现请求的取消和并发控制:通过二次封装,可以实现请求的取消和并发控制。例如可以在请求发送前生成一个唯一的请求标识,当需要取消请求时,通过该标识找到对应的请求并取消;同时可以设置最大并发数,控制同时发送的请求数量,避免网络资源的浪费。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值