前端项目实战215-封装axios得请求

简介: 前端项目实战215-封装axios得请求
import axios from 'axios' // 引入axios 
const instance = axios.create({
  baseURL: "http://192.168.1.49:10010",
  timeout: 60000
})
// 请求拦截器
instance.interceptors.request.use(function (config) {
  console.log('发请求之前', config)
  return config
}, function (error) {
  console.log('请求错误', error)
  return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(function (response) {
  console.log('得到的响应数据', response)
  return response
}, function (error) {
  console.log('响应错误', error)
  return Promise.reject(error)
})
// get请求
export function get (url, data = {}) {
  console.log(data,"datattattata")
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: data
      })
      .then((response) => {
        resolve(response)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
// post请求
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (response) => {
        resolve(response.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}
相关文章
|
20天前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
8天前
|
JavaScript 前端开发 应用服务中间件
蓝易云 - dockerfile部署前端vue打包的dist文件实战
这样,你的Vue应用就会在Docker容器中运行,你可以通过访问[http://localhost:8080](http://localhost:8080/)来查看你的应用。
102 0
|
8天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
15 2
|
25天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
26天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
26天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
26天前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
26天前
|
资源调度 前端开发 JavaScript
用 Axios 提升前端异步请求的效率
用 Axios 提升前端异步请求的效率
|
27天前
|
JSON 前端开发 JavaScript
第三章 前端发起HTTP请求
第三章 前端发起HTTP请求
|
27天前
|
前端开发 JavaScript 安全
第十篇 Axios最佳实战:前端HTTP通信的王者之选
第十篇 Axios最佳实战:前端HTTP通信的王者之选