vue-axios网络请求封装

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　在说axios的网络封装前，先说一下之前说过的axios的全局默认配置。讲过axios的全局配置是为了避免重复去书写相同的配置，才进行统一的，但实际开发中，只有这一个全局配置是往往不够的，比如说你定义一个baseUrl="http://192.168.1.2"，但是某些vue文件并不想去访问这个地址，想请求另一个IP，于是全局配置的方式就不适用了，并且全局配置的这个方式在实际开发也不适用，往往是创建多个不同的axios实例，不同的axios实例统一了各自的配置选项，具体使用如下：

const instance1 = axios.create({
  baseURL: \'http://httpbin.org\',
  timeout: 5000
})
instance1({
  url: \'/home\',
  method: \'get\'
}).then(response => {
  console.log(response)
})
const instance2 = axios.create({
  baseURL: \'http://192.168.88.11\',
  timeout: 4000
})
instance2({
  url: \'/home\',
  method: \'get\'
}).then(response => {
  console.log(response)
})

　　下面开始说axios网络封装了。

　　使用axios无非是发送请求嘛，而发送请求的地方一般在我们的vue文件进行发送，然后拿到数据展示到页面上。不过这样的方式有两个不好的地方：

　　　　1. vue文件和axios的耦合度太高了，vue是直接导入axios进行使用的，如果哪一天这个框架不维护了，意味着代码得频繁替换

　　　　2. axios代码太冗余了，如果有100个vue文件，要写那么多相同的axios代码，是很麻烦的一件事

　　于是，我们尝试将axios进行封装，比如说封装成一个request.js，到时候vue文件引入这个request.js即可。一般的做法是在src下创建一个network目录，表示存放网络相关的文件，再该目录下创建request.js，封装的内容如下：

import axios from \'axios\'
export function request(config){ //config是请求的配置项，包含url,method
  const instance1 = axios.create({
    baseURL: \'http://httpbin.org\',
    timeout: 5000
  })
  return instance1(config)
}

　　使用request.js，如下：

import {request} from \'@/network/request\';
request({
  url: \'/\',
  method: \'get\'
}).then(res => {
  console.log(res)
})

　　具体的视频介绍看：https://www.bilibili.com/video/BV15741177Eh?p=146

以上是 vue-axios网络请求封装 的全部内容， 来源链接： utcz.com/z/380768.html

回到顶部