vue项目中axios封装api请求方式二

原创

于 2021-05-11 22:13:40 发布

· 1.7k 阅读

7 ·

版权

本文介绍了在Vue项目中如何使用axios进行request请求的封装，包括在`src/network`目录下创建`request.js`文件并定义API接口，以及如何在组件中全局挂载和调用这些接口。通过在`main.js`中将request挂载到vue原型链，使得在项目各处能方便地使用`this.$request()`进行请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，axios封装request请求，并封装api请求接口的方式

在vue项目目录scr 下新建 network目录再新建request .js文件

//request .js 文件
// 引入axios请求库
import axios from 'axios'
// 封装Promise实例 
export function request (config) {
   
    // 1.创建axios实例
    const instance = axios.create({
   
      // 1.1定义统一的请求地址
      baseURL: 'https://autumnfish.cn/',
      // 1.2定义统一的请求超时设置
      timeOut: 5000
    })
    
    // 2.1添加请求拦截器
    instance.interceptors.request.use(function (config) {
   
      // 在发送请求之前做些什么
      console.log(config);
      return config;
    }, function (error) {
   
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 2.2添加响应拦截器
    instance.interceptors.response.use(function (response) {
   
      // 对响应数据做点什么
      console.log(response);
      return response;
    }, function (error) {
   
      // 对响应错误做点什么
      return Promise.reject(error)

最低0.47元/天解锁文章