二次封装axios

最新推荐文章于 2024-07-22 08:55:10 发布

qq_41283785

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量70

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41283785/article/details/126153928

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

封装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)
                }
            })

        }
    }