【vue3】 axios封装使用（js/ts）_ts import { getcfgmap } from "@/request/api.ts";

前面的废话，简称前言

Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

作为一个前端开者，我们除了要布局，还要跟后端开发者做数据交互。这时，我们就要用过axios请求数据了~~

话不多说，我们动手封装使用axios吧~~

动手(JS版)

1.安装

npm install --save axios vue-axios
1

2.在根目录上新建 api文件夹，在api文件夹中新建 axios.js 和 httpHelper.js

axios.js 用于初始化axios实例

//axios.js 
import axios from "axios";

// 1.创建axios实例
const axiosInit = axios.create({
  // 设置超时时间
  time:2000
})

// 2.请求拦截器
axiosInit.interceptors.request.use((config) => {
  //在发送之前做点什么
  return config
}, (error) => {
  //对请求错误做点什么
  return error
})

// 3.相应拦截器
axiosInit.interceptors.response.use((response) => {
  return response
})

// 4.导出
export default () => axiosInit
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

httpHelper.js 用于封装请求方法

import axios from 'axios'

const axiosInit = axios.create()
const baseURL = 'https://autumnfish.cn' //后台路径（这是一个开源的段子接口）
const httpHelper = {}
// 封装get方法（post类似）
httpHelper.get = (apiUrl, params, succCallback, errCallback) => {
  let headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  }
  let httpUrl = baseURL + apiUrl
  axiosInit.get(httpUrl, params).then(
    (res) => {
      if (succCallback) {
        succCallback(res)
      } else {
        console.log(res)
      }
    },
    (err) => {
      // alert(httpUrl)
      if (errCallback) {
        errCallback(err)
      }
    }
  )
}

export default httpHelper

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

3. 在页面上调用接口~

<script setup>
import httpHelper from '../api/httpHelper'

httpHelper.get('/api/joke', {}, function (res) {
  console.log('httpHelper.get', res)
})
</script>
1
2
3
4
5
6
7

4.最后的最后，我们成功拿到接口上的数据啦~

动手(TS版)

近期正在实践ts的学习成果，故把ts封装axios的方法也记录下来~~

1. 创建axios实例

// service.ts
import axios from 'axios';

const service = axios.create({
  timeout: 5000,  // 超时时间
  headers: {
      'Content-Type': 'application/json;charset=utf-8'
  },
  validateStatus () {
    return true;
  },
});

service.interceptors.request.use(
  (config: any) => {
    console.log('请求拦截~!')
    // 添加请求头以及其他逻辑处理
    return config;
  },
  (error: any) => {
    Promise.resolve(error);
  }
);

/**
 * 响应拦截器
 */
service.interceptors.response.use(
  (response: any) => {
    console.log('响应拦截：拦截事件可以放这里',response)
    const res = response.data;
    // 后端status错误判断
    if ( res.status === 200 ) {

      return Promise.resolve(res);
    } else {
      // 错误状态码处理
      return Promise.reject(res);
    }
  },
  (error: any) => {
    // Http错误状态码处理
    return Promise.reject(error);
  }
);


export default service;
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
46
47
48

2. 封装请求方法

// api.ts
import service from './service'
const baseurl = import.meta.env.VITE_APP_API; // 后台地址

/**
* 封装get请求
* @param {string} url 请求连接
* @param {Object} params 请求参数
* @param {Object} header 请求的header头
*/
export const get = (url: string, params: object): object => {
    return service({
        url: baseurl + url,
        method: 'get',
        params: params,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
}

/**
* 封装post请求
* @param {string} url 请求连接
* @param {Object} params 请求参数
* @param {Object} header 请求的header头
*/
export const post = (url: string, params: object):object => {
    return service({
        url:  baseurl + url,
        method: 'post',
        data: params,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
}
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

3. 请求接口

import { post , get } from '@/api/api.ts'

get('/api/users',{id:1}).then(users => {
  console.log(users);
});

post('/api/users',{id:1}).then(users => {
  console.log(users);
});
1
2
3
4
5
6
7
8
9