Axios

1
function axios({ url, method = 'GET', params = {}, data = {} }) {
2
    // 返回一个promise对象
3
    return new Promise((resolve, reject) => {
4
        // 处理method 转大写
5
        method = method.toUpperCase()
6

7
        // 处理 query参数（拼接到url上）id=1&xxx=abc
8
        let queryString = ''
9
        Object.keys(params).forEach((key) => {
10
            queryString += `${key}=${params[key]}&`
11
        })
12
        if (queryString) {
13
            // 去除最后的'&'
14
            queryString = queryString.substring(0, queryString.length - 1)
15
            // 接到url
16
            url += '?' + queryString
17
        }
18

19
        // 1. 执行异步Ajax请求
20
        // 创建xhr对象
21
        const request = new XMLHttpRequest()
22
        // 打开连接（初始化请求，没有请求）
23
        request.open(method, url, true)
24
        // 发送请求
25
        if (method === 'GET' || method === 'DELETE') {
26
            request.send() // undefined
27
        } else if (method === 'POST' || method === 'PUT') {
28
            // 设置请求头，告诉服务器请求体的格式是json
29
            request.setRequestHeader(
30
                'Content-Type',
31
                'appliaction/json;charset=utf-8'
32
            )
33
            // 发送json格式请求参数
34
            request.send(JSON.stringify(data)) // 异步执行
35
        }
36

37
        // 绑定状态改变的监听
38
        request.onreadystatechange = function () {
39
            // 同步执行
40
            // 如果请求没有完成，直接结束
41
            if (request.readyState !== 4) {
42
                return
43
            }
44
            // 如果响应状态码在[200, 300)之间代表成功，否则失败
45
            const { status, statusText } = request
46
            if (status >= 200 && status <= 299) {
47
                // 2.1 如果请求成功，调用resolve()
48
                // 准备结果数据对象response
49
                const response = {
50
                    data: JSON.parse(request.response),
51
                    status,
52
                    statusText,
53
                }
54
                resolve(response)
55
            } else {
56
                // 2.2 如果请求失败，调用reject()
57
                reject(new Error('request error status is ' + status))
58
            }
59
        }
60
    })
61
}

1
// 1. GET请求：从服务器端获取数据
2
function testGet() {
3
    axios({
4
        url: 'http://localhost:3000/posts',
5
        method: 'GET',
6
        params: {
7
            id: 1,
8
            xxx: 'abc',
9
        },
10
    }).then(
11
        (response) => {
12
            console.log(response)
13
        },
14
        (error) => {
15
            alert(error.message)
16
        }
17
    )
18
}
19

20
// 2. POST请求：向服务器端添加数据
21
function testPost() {
22
    axios({
23
        url: 'http://localhost:3000/posts',
24
        method: 'POST',
25
        data: {
26
            title: 'json-server_post',
27
            author: 'typicode_post',
28
        },
29
    }).then(
30
        (response) => {
31
            console.log(response)
32
        },
33
        (error) => {
34
            alert(error.message)
35
        }
36
    )
37
}
38
// 3. PUT请求：服务器更新数据
39
function testPut() {
40
    axios({
41
        url: 'http://localhost:3000/posts/1',
42
        method: 'PUT',
43
        data: {
44
            title: 'json-server_put',
45
            author: 'typicode_put',
46
        },
47
    }).then(
48
        (response) => {
49
            console.log(response)
50
        },
51
        (error) => {
52
            alert(error.message)
53
        }
54
    )
55
}
56

57
// 4. DELETE请求：服务器删除数据
58
function testDelete() {
59
    axios({
60
        url: 'http://localhost:3000/posts/2',
61
        method: 'delete',
62
    }).then(
63
        (response) => {
64
            console.log(response)
65
        },
66
        (error) => {
67
            alert(error.message)
68
        }
69
    )
70
}

1
// 添加两个请求拦截器(回调函数)
2
axios.interceptors.request.use(
3
    (config) => {
4
        console.log('request interceptor1 onResolved()') // -----------2
5
        return config
6
    },
7
    (error) => {
8
        console.log('request interceptor1 onRejected()')
9
        return Promise.reject(error)
10
    }
11
)
12

13
axios.interceptors.request.use(
14
    (config) => {
15
        console.log('request interceptor2 onResolved()') // -----------1
16
        return config
17
    },
18
    (error) => {
19
        console.log('request interceptor2 onRejected()')
20
        return Promise.reject(error)
21
    }
22
)
23

24
// 添加两个响应拦截器
25
axios.interceptors.response.use(
26
    (resopnse) => {
27
        console.log('response interceptor1 onResolved()') // -----------3
28
        return resopnse
29
    },
30
    (error) => {
31
        console.log('response interceptor1 onRejected()')
32
        return Promise.reject(error)
33
    }
34
)
35

36
axios.interceptors.response.use(
37
    (resopnse) => {
38
        console.log('response interceptor2 onResolved()') // -----------4
39
        return resopnse
40
    },
41
    (error) => {
42
        console.log('response interceptor2 onRejected()')
43
        return Promise.reject(error)
44
    }
45
)
46

47
axios
48
    .get('http://localhost:3000/posts')
49
    .then((response) => {
50
        console.log('data', response.data) //data Array(4) -------------5
51
    })
52
    .catch((error) => {
53
        cosole.log('error', error.message)
54
    })
55

56
// request interceptor2 onResolved()
57
// request interceptor1 onResolved()
58
// response interceptor1 onResolved()
59
// response interceptor2 onResolved()
60
// data Array(4)