axios请求封装

一架打字机

于 2021-12-30 18:33:49 发布

阅读量625

点赞数 1

文章标签：前端 javascript ajax html5 vue.js

本文链接：https://blog.csdn.net/iseyre/article/details/122241129

版权

本文介绍了如何在Vue.js项目中进行axios请求的封装。通过创建api文件夹和http.js，以及request文件来组织和管理请求路径。在实际使用时，可以方便地在页面中导入并调用封装好的请求方法。

摘要由CSDN通过智能技术生成

创建api文件夹，里面创建http.js文件

再创建一个request文件，专门用来放置路径

在页面上这么使用

先引入：import {gettab} from '../api/request.js'，

定义方法，最后记得调用方法

完整代码：

//http.js文件
import axios from 'axios'
let http=axios.create({
    // baseURL:'',
    // timeout:500

})
// 请求拦截
http.interceptors.request.use(config=>{
    return config
},(error)=>{
    return Promise.reject(error)

})
// 响应拦截
http.interceptors.response.use(res=>{
    return res
},(error)=>{
    return Promise.reject(error)

})
export default http

//request.js文件

import http from './http'
const gettab=async()=>{
    let data=await http.get('http://shop.bufantec.com/bufan/category/categoryNav?id=1005000')
    return data
}
export {gettab}

主页面调用、使用

import {gettab} from '../api/request.js'
export default {
  created() { 
    this.gets()
 
  },
   methods:{
         gets(){
             gettab().then(res=>{
            console.log(res)
             })
           }
     }
}