axios网络请求封装

最新推荐文章于 2025-03-24 09:21:51 发布

♚ Painting

最新推荐文章于 2025-03-24 09:21:51 发布

阅读量122

点赞数 1

分类专栏： Vue 文章标签：网络 axios vue

本文链接：https://blog.youkuaiyun.com/qq_46071321/article/details/112635988

版权

Vue 专栏收录该内容

29 篇文章

订阅专栏

一、

//network/request.js
import axios from "axios";
export function request(config,success,failure){
  //1.创建axios的实例
  const instance = axios.create({
    baseURL:'http://123.337.33.33:8000',
    timeout:5000
  })
  //发送真正的网络请求
  instance(config)
    .then(res =>{
      success(res)
    })
    .catch(err =>{
      failure(err)
    })
}

//main.js
import {request} from "./network/request";
request({
  url:'/home/multidata'
},res =>{
    console.log(res);
  },err => {
    console.log(err);
  }
)

二、

//network/request.js
export function request(config){
  //1.创建axios的实例
  const instance = axios.create({
    baseURL:'http://123.337.33.33:8000',
    timeout:5000
  })
  //发送真正的网络请求
  instance(config.baseConfig)
    .then(res =>{
      config.success(res)
    })
    .catch(err =>{
      config.failure(err)
    })
}

//main.js
request({
baseConfig:{
  url:'/home/multidata'
},
success: res=>{
  console.log(res);
},
  failure:err => {
    console.log(err);
  }
})

三、

//network/request.js
export function request(config){
 return new Promise((resolve,reject)=>{
   //1.创建axios的实例
   const instance = axios.create({
     baseURL:'http://123.337.33.33:8000',
     timeout:5000
   })
   //发送真正的网络请求
   instance(config)
     .then(res =>{
      resolve(res)
     })
     .catch(err =>{
       reject(err)
     })
 })
}

//main.js
request({
  url:'/home/multidata'
}).then(res =>{
  console.log(res);
}).catch(err => {
  console.log(err);
})

四、

看源码可以知道instance(config)返回的就是Promise，所以还可以这样写
在这里插入图片描述

//network/request.js
export function request(config){
    //1.创建axios的实例
    const instance = axios.create({
      baseURL:'http://123.337.33.33:8000',
      timeout:5000
    })
    //3.发送真正的网络请求  instance返回的就是一个Promise
  return instance(config)
}

//main.js
request({
  url:'/home/multidata'
}).then(res =>{
  console.log(res);
}).catch(err => {
  console.log(err);
})