axios封装使用

🌼未封装

在项目中往往一个页面存在着要联调好几个接口，此时用下面的写法就会显得代码很冗余

// 向给定ID的用户发起请求  
axios.get('/user?ID=123456',{  
    params: {  //发送请求的数据
        ID: 123456  
    }  
})  
.then(function (response) {  
    // 处理成功情况  
    console.log(response);  
})  
.catch(function (error) {  
    // 处理错误情况  
    console.log(error);  
})  
.finally(function () {  
    // 总是会执行  
});

// 支持async/await用法  
async function getUser() {  
    try {  
        const response = await axios.get('/user?ID=123456');  
        console.log(response);  
    } catch (error) {  
        console.error(error);  
    }  
}
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

🌼封装一下

errorCode.js

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}
1
2
3
4
5
6

request.js

一般会在utils文件夹下创建request.js文件。封装的好处：统一处理请求和响应、简化API调用、提高代码的可维护性。

//引入axios
import axios from 'axios'
//引入错误信息合集
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
  //base接口，表示请求URL的公共部分
  baseURL:'http://127.0.0.1:8000/api/',
  // 超时
  timeout: 30000
  //还可以进行一些其他的配置
})

// 请求拦截器
service.interceptors.request.use(config => {
  
  //配置请求头，以下是一个示例，设置语言为简体中文
  config.headers.lang = 'zh-CN'

  //对请求数据进行处理
  
  return config
}, error => {
  return Promise.reject(error)
  //请求拦截错误处理
  
})

// 响应拦截器
service.interceptors.response.use(async(res) => {
  //根据自己的需求进行代码的编写，以下是一些示例
  
  // 未设置状态码则默认成功状态
  const code = res.data.code || 200;
  // 获取错误信息
  const message = errorCode[code] || res.data.msg || errorCode['default']

    //通过响应码的不同进行不同的处理
    if (code === 401) {
       //响应码为401时的处理

    } else if (code === 404) {
       //响应码为404时的处理

    } else {
      //响应码为其他类型时的处理
    }

    return res.data
  }, async error => {
    //响应发生错误时的处理

    console.log('error')

    return false
  }
)
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
49
50
51
52
53
54
55
56
57
58
59
60

🌼调用接口

1.接口封装调用

import request from '@/utils/request';

// 获取用户信息
export function getUserInfo(data) {
  return request({
    url: `/user/getUserInfo`, //请求的接口地址
    method: 'post', //请求的方式
    data //请求的数据
  })
}
1
2
3
4
5
6
7
8
9
10

import {getUserInfo} from '@/api/login';

//写法1
const res = await getUserInfo({userId:123456})

//写法2
function getInfo() {
  getUserInfo({userId:123456}).then((res) => {
    console.log(res)
  })
}
1
2
3
4
5
6
7
8
9
10
11

2.接口普通调用

import request from "@/utils/request";

function getUserInfo(){
  request({
    url: `/user/getUserInfo`,
    method: "post",
    data: {
      userId:123456
    },
  }).then((res) => {
    console.log(res)
  }).catch(()=>{
  
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15