vue的封装request接口(详细)

最新推荐文章于 2024-08-24 07:00:00 发布

m0_67402731

最新推荐文章于 2024-08-24 07:00:00 发布

阅读量3.1k

点赞数 1

分类专栏：前端 html 文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_67402731/article/details/123304625

版权

本文介绍了如何在Vue项目中封装axios接口，以实现更便捷的API调用和集中化的地址管理。通过引入axios，创建request.js并进行二次封装，组件可以直接调用封装好的方法，简化了代码并方便统一修改服务器地址。

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

由于一般使用axios,但是每个组件使用的话,每次都要调用axios还要写地址,如果想更改服务器的地址的话,就要一个组件一个组件的更改

所以这就是封装的好处

首先引入axios的依赖

创建request.js

import axios from 'axios'

// create an axios instance
const service = axios.create({
  // baseURL: 'http://chenyp.top:8008', // url = base url + request url
  baseURL: 'http://127.0.0.1:8686', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => config
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    return response.data;
  }
)