一切福田，不離方寸，從心而覓，感無不通。

axios基础用法

概述：

1.axios：一个基于Promise用于浏览器和nodejs的HTTP客户端。本质是对ajax的封装。

特征：

  • 从浏览器中创建XMLHttpRequest
  • 从node.js发出http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止CSRF/XSRF

2.安装

  • npm install axios
  • import axios from "axios"

3.API

1 axios(config)

1
2
3
4
5
6
7
8
    eg: axios({
        method:"post",
        url:"/user",
        data:{
            firstName:"nanhua",
            lastName:"qiushui"
        }
    });

 

2.axios(url,config) //默认为get请求

3.请求方法别名

1
2
3
4
5
6
7
        axios.request(config)
        axios.get(url,config)
        axios.post(url,data,config)
        axios.delete(url,config)
        axios.head(url,config)
        axios.put(url,data,config)
        axios.patch(url,data,config)

 

4.并发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        自定义配置创建axios实例
        var instance = axios.create({
            baseURL:"https://some-domain.com/api/",
            timeout:1000,
            headers:{"X-Custom-Header":"foobar"}
        })
        自定义实例默认值
        //创建实例时设置
        //实例创建后修改默认值（设置全局axios默认值）
        axios.defaults.baseURL = "https://api.example.com";
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
 
        并发：axios.all(iterable)
        eg: axios.all([
            axios.get("https://api.github.com/xxx/1");
            axios.get("https://api.github.com/xxx/2");
        ]).then(axios.spread(function(userResp,reposResp){
            console.log("User",userResp.data);
            console.log("Repositories",reposResp.data);
        }))

 

1
2
    * 当所有的请求都完成后，会收到一个数组，它包含着响应对象，其中的顺序和请求发送的顺序相同，可以用<span class="hljs-selector-tag">axios</span><span class="hljs-selector-class">.spread</span>分割成多个单独的响应对象。
 

5.config参数

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
        baseURL: 'https://some-domain.com/api/',  //将自动加在url前面，除非url是一个绝对URL
        
        //允许在向服务器发送前，修改请求数据
        //只能用在PUT\POST\PATCH
        //后面数组的函数必须返回一个字符串/ArrayBuffer或Stream
        transformRequest:[function(data){
            //对data进行任意转换处理
            return data;
        }],
 
        //在传递给then/catch之前，允许修改响应数据
        transformResponse: [function (data) {
            return data;
        }],
 
        //即将被发送的自定义请求头
        headers:{
            'X-Requested-With': 'XMLHttpRequest'
        },
 
        //即将与请求一起发送的URL参数
        params:{
            ID: 12345
        },
 
        //负责params序列化的函数
        paramsSerializer:function(params){
            return Qs.stringify(params,{arrayFormat: "brackets"});
        },
 
        //超时
        timeout: 1000,
 
        //表示跨域请求时是否需要使用凭证
        withCredentials: false,
 
        //允许响应内容的最大尺寸
        maxContentLength: 2000,
 
        //对打重定向数目
        maxRedirects:5,
 
        //是否启用长连接
        httpAgent: new http.Agent({
            keepAlive: true
        }),
        httpsAgent: new https.Agent({
            keepAlive: true
        }),
 
        //代理服务器设置
        proxy:{
            host:"127.0.0.1",
            port: 9000,
            auth:{
                username:"nanhuaqiushui",
                password:"Huawei@123"
            }
        }

 

6.响应结构

1
2
3
4
5
6
7
    {
        data:{},
        status:200,
        statusText:"OK",
        headers:{},  //服务器响应的头
        config:{}   //为请求提供的配置信息
    }

 

7.拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    //请求拦截器
    axios.interceptors.request.use(function(config){
        //发送请求之前做些什么
        return config;
    },function(error){
        //请求错误之后做些什么
        return Promise.reject(error);
    })
    //响应添加拦截器
    axios.interceptors.response.use(function(config){
        //发送请求之前做些什么
        return config;
    },function(error){
        //请求错误之后做些什么
        return Promise.reject(error);
    })
 
    //移除拦截器
    var myInterceptor = axios.interceptors.request.use(function(){
        ...
    })
    axios.interceptors.request.eject(myInterceptor);

 

新兴实践

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
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 100000
})
 
//  请求拦截器
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json'
    if (store.getters.token) {
      // 让每个请求携带token
      config.headers['Authorization'] = store.getters.token
    }
    return config
  },
  error => {
    Toast.failed('网络异常，请检查网络连接')
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code && res.code !== 200) {
        Toast.failed(res.message)
    }
    return response
  },
  error => {
    Toast.failed('网络异常，请检查网络连接')
    return Promise.reject(error)
  }
)
export default service

 

from:https://www.cnblogs.com/nanhuaqiushui/p/10514122.html

Copyright © 2024 Longsheng All rights reserved.