Axios

杵桩王

Axios

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

使用json-server
1. axios基本使用

1. // 1.GET
2. axios({
3.     method: 'GET',
4.     url: 'http://localhost:3000/posts/2'
5. }).then(res => {
6.     console.log(res);
7. })
9. // POST
10. axios({
11.     method: 'POST',
12.     url: 'http://localhost:3000/posts',
13.     data: {
14.         title: 'test',
15.         author: 'lll'
16.    }
17. }).then(res => {
18.     console.log(res);
19. })
21. // PUT
22. axios({
23.    method: 'PUT',
24.     url: 'http://localhost:3000/posts/3',
25.     data: {
26.         title: 'test',
27.         author: 'new-lll'
28.     }
29. }).then(res => {
30.     console.log(res);
31. })
33. // DELETE
34. axios({
35.     method: 'DELETE',
36.     url: 'http://localhost:3000/posts/3',
37. }).then(res => {
38.     console.log(res);
39. })

复制代码

2. 其他请求方法

1. axios.request(config)
2. axios.get(url[, config])
3. axios.delete(url[, config])
4. axios.head(url[, config])
5. axios.options(url[, config])
6. axios.post(url[, data[, config]])
7. axios.put(url[, data[, config]])
8. axios.patch(url[, data[, config]])
10. // request
11. axios.request({
12.     method: 'GET',
13.     url: 'http://localhost:3000/posts/2'
14. }).then(res => {
15.     console.log(res)
16. })
18. // POST
19. axios.post(
20.     'http://localhost:3000/comments',
21.     {
22.         "body": "other",
23.        "postId": 2
24.     }
25. ).then(res => {
26.     console.log(res)
27. })

复制代码

3. axios默认配置

1. // default setting
2. axios.defaults.method = 'GET'
3. axios.defaults.baseURL = 'http:localhost:3000'
4. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
5. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

复制代码

4. axios创建实例对象

1. // 创建实例对象
2. const obj = axios.create({
3.     baseURL: 'http://localhost:3000'
4. })
5. // obj实例和axios对象几乎相同
6. obj({
7.    url: 'posts/2'
8. }).then(res => {
9.     console.log(res)
10. })

复制代码

5. axios拦截器

1. /**
2. * 拦截器实质是函数
3. * 请求拦截器，在请求发出时检查请求的参数等是否正确
4. * 响应拦截器，在接受响应前，对响应进行预处理
5. */
6. // 请求拦截器
7. axios.interceptors.request.use(functio(config) {
8.     console.log('req success')
9.     return config
10. }), function (error) {
11.     console.log('req fail')
12.     return Promise.reject(error)
13. }
15. // 接收拦截器
16. axios.interceptors.response.use(functio(response) {
17.     console.log('res success')
18.     return response;
19. }, function (error) {
20.     console.log('res fail')
21.     return Promise.reject(error);
22. });

复制代码

6. 取消请求

1. let cancel = nul
2. btns[0].onclick = function () {
3.     // 检查上一个请求是否结束
4.     if (cancel !== null) {
5.         cancel()
6.     }
7.     axios({
8.         url: '/posts',
9.         cancelToken: new axios.CancelTok(function executor(c) {
10.             cancel = c;
11.         })
12.     }).then(res => {
13.         cancel = null
14.         console.log(res)
15.     })
16. btns[1].onclick = function () {
17.     cancel()
18. }

复制代码

来源:https://www.cnblogs.com/ucbb/p/17101771.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！