axios

基于promise可以用于浏览器和node.js的网络请求库

# 安装

npm install axios

# 使用

import axios from 'axios';
import qs from 'qs';
// 根据不同的环境配置接口的前缀
// 可配置多个http
const http = axios.create({
    baseURL: process.env.NODE_ENV == 'production' ? 'http://localhost:3000/api/' :''
})

this.$https({
  requestBase:'three'
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
  // 可配置多个baseURL
  if(config.requestBase == 'three'){
      config.baseURL = 'xxx';
  }
  if(config.method == 'post'){
    if(config.requestType == 'plyload'){
        // request payload
        config.headers['Content-Type'] = 'application/json'
    }else{
        // fromdata请求
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
        config.data = qs.stringify(config.data)
    }
  }
  config.headers.token = 'zxcvbnm'
  return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 响应成功的
  if (response.status == '200') {
    if (response.data.code == '401' || response.data.code == '5001') {
        
    } else {
        response = response.data;
    }
  }
  return response;
}, function (error) {
  // 响应失败的
    if (error && error.response) {
        switch (error.response.status) {
            case 400:
                error.message = '错误请求'
                console.log('错误请求')
                break;
            case 401:
                error.message = '未授权或者登录信息已过期，请重新登录'
                console.log('未授权，请重新登录')
                break;
            case 403:
                error.message = '拒绝访问'
                console.log('拒绝访问')
                break;
            case 404:
                error.message = '请求错误,未找到该资源'
                console.log('请求错误,未找到该资源')
                break;
            case 405:
                error.message = '请求方法未允许'
                console.log('请求方法未允许')
                break;
            case 408:
                error.message = '请求超时'
                console.log('请求超时')
                break;
            case 500:
                error.message = '服务器端出错'
                console.log('服务器端出错')
                break;
            case 501:
                error.message = '网络未实现'
                console.log('网络未实现')
                break;
            case 502:
                error.message = '网络错误'
                console.log('网络错误')
                break;
            case 503:
                error.message = '服务不可用'
                console.log('服务不可用')
                break;
            case 504:
                error.message = '网络超时'
                console.log('网络超时')
                break;
            case 505:
                error.message = 'http版本不支持该请求'
                console.log('http版本不支持该请求')
                break;
            default:
                error.message = `连接错误${error.response.status}`
                console.log(`连接错误${error.response.status}`)
        }
    } else {
        error.message = '';
    }
    if (error && error.response && error.response.status) {
        // 进行提示
        // Notify(`${error.response.status}-${error.message}`);
    }
    return Promise.reject(error.response);
});
export default http;

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

# api解耦

单独维护api
可多次调用

import http from '../utils/http'
export function getuser(params = null) {
    return http({
        url: '/api/get/user',
        method: 'get',
        params
    })
}

1
2
3
4
5
6
7
8

# 调用

// get 使用params   post使用data
axios({
  url:'地址',
  method:'get',
  params:{}
})
axios.get('地址',{'传递内容'})
//注意: put请求只能用data来传递数据

1
2
3
4
5
6
7
8

# axios传参的两种形式

axios默认方式是Request Payload 格式

# application/x-www-form-urlencoded(默认)

// 请求体参数格式是键值对拼接的方式  如:key=value&key=value
config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'

1
2

提示

使用fromdata时需要使用qs
qs是一个流行的查询参数序列化和解析库

# application/json

// 请求体要求的参数格式是JSON  {"userName":"dong","password":123123}
config.headers['Content-Type'] = 'application/json'

1
2

# multipart/form-data

用于文件图片上传(请求体为二进制)

# application/xml 和 text/xml

xml格式的数据

# 常见Content-Type

1. application/x-www-form-urlencoded  // fromdata格式
2. multipart/form-data   // 文件上传
3. application/json      // json格式
4. application/xml 和 text/xml  // xml格式的数据

1
2
3
4

#axios

上次更新: 2024/10/09, 16:59:47