vue2.0_在vue中axios请求的封装和使用_vue2 axios封装完整实例

首先

npm install axios
1

其次

在src目录下新建一个utils文件夹，我们的一些封装工具都可以放在这。
然后在utils文件夹下新建一个request.js文件，将aixos请求的封装写到里面：

import axios from 'axios'
import Qs from 'qs'
import store from '@/store'
import router from '@/router'
import filterPath from '@/utils/filterPath'
import {
   Toast} from 'vant'
import {
   getToken} from '@/utils/auth'
import {
   removeToken} from "./auth";
import {
   isEmptyObject} from '@/utils'


// 创建axios实例
const service = axios.create({
   
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // 跨域请求时发送cookie
  timeout: 25000, // 请求超时的时长
  headers: {
   'Content-Type': 'application/x-www-form-urlencoded'}, // 默认设置请求头 为FormData 数据格式  （JSON数据格式：application/json）
  method: 'post', // 默认设置'post'请求
  withCredentials: true //跨域请求时是否需要使用凭证  简单讲：跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。
});

// 请求拦截器（对请求数据配置做统一处理）
service.interceptors.request.use(
    //在发送请求之前做些什么
    config => {
   
      // console.log('baseURL:', config.baseURL, config.type)
      const BASE_PATH = filterPath(config.type);
      config.data = {
   ...config.data};
      if(config.method === 'get'){
   
        config.params = new URLSearchParams(config.data
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