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)

    eg: axios({
        method:"post",
        url:"/user",
        data:{
            firstName:"nanhua",
            lastName:"qiushui"
        }
    });

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

3.请求方法别名

        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.并发

        自定义配置创建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);
        }))

    * 当所有的请求都完成后，会收到一个数组，它包含着响应对象，其中的顺序和请求发送的顺序相同，可以用axios.spread分割成多个单独的响应对象。

5.config参数

        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.响应结构

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

7.拦截器

    //请求拦截器
    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);

新兴实践

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