vue3中axios的二次封装_vue3 axios的二次封装

一、先在项目中安装axios.js: npm install axios
二、在项目中的src文件夹下创建一个文件夹(config),然后在config文件夹下再创建一个js文件(index.js)
在index.js中

export default {
  title: 'hello',
  baseUrl: {
    dev: '/api',//开发后的地址
    pro: ''//上线后的地址
  }
}
1
2
3
4
5
6
7

三、在项目中的src文件夹下创建一个文件夹(utils)，然后在utils文件夹下再创建一个js文件(request.js)

//在文件中引入axios
import axios from "axios";
在文件中引入config
import config from "@/config";
//定义一个baseURL
//通过process.env.NODE_ENV === "development"判断是不是开发环境
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.pro
定义一个类
class HttpRequest{
	//把类做一个初始化
	constructor(baseUrl) {
    this.baseUrl = baseUrl
  }
 // 配置一下请求头
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl
    }
    return config
  }
  //添加拦截器
  interceptors(instance) {
    // 添加请求拦截器
    instance.interceptors.request.use(function (config) {
      return config;
    }, function (error) {
      return Promise.reject(error)
    });
    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
      return response.data
    }, function (error) {
      return Promise.reject(error)
    })
  }
  request(options) {
    options = { ...(this.getInsideConfig()), ...options }
    const instance = axios.create()
    // 使用拦截器
    this.interceptors(instance)
    return instance(options)
  }
}
//导出类
export default new HttpRequest(baseUrl)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

在src文件夹下创建一个js文件(http.js)

//在http.js中引入request.js文件
import request from "./request";
然后就可以在文件中写方法调用接口了
export const getBannerData = () => {
  return request.request({
    url: 'banner',//请求的接口路径
    method: 'get'//请求方法
  })
}
1
2
3
4
5
6
7
8
9

然后就可以在vue文件中使用请求了

import {getBannerData} from '@/utils/http';
getBannerData().then((res => {
      this.data = res.data.navbar
      this.swipers=res.data.swipers
    }))
1
2
3
4
5

以上仅是个人学习过程中的总结，不喜勿喷，如有问题欢迎指出！