axios 支持流式输出 axios流程

Axios 是一个基于promise用于浏览器和 node.js 的 HTTP 客户端。简单的理解就是ajax的封装。

Axios的使用：1.在浏览器中创建 XMLHttpRequest

                        2. 从 node.js 发出 http 请求

                        3.拦截请求和响应

                        4.转换请求和响应

                        5.自动转换JSON数据

Axios使用步骤：

1.安装：npm i axios

 2.在main.js引入axios

                import axios from 'axios'
                Vue.prototype.$http = axios

3.使用：

//第一种
axios.get/put/delete/post('url地址'，（参数）).then(res(接收到的数据)=> {
    console.log(res);
}).catch(function (error) {
    console.log(‘异常处理’);
});
//第二种
axios({
  method: 'get/put/delete/post',
  url: 'url地址',
  data: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

4.参数的配置

// 创建axios实例
const httpService = axios.create({
    // 请求超时时间
    timeout: 9000 // 需自定义
});

axios({
  // 请求的服务器 URL
  url: '请求的服务器 URL',

  // 创建请求时使用的方法
  method: 'get/put/post/delete'// 默认是 get

  // 将自动加在 url 前
  baseURL: '在url前自动添加的内容（http://）',

  // 在向服务器发送前，修改请求数据。只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
  
  // 在传递给 then/catch 前，修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // 与请求一起发送的 URL 参数
     params:数据
 

  // 用于 params 的序列化的函数
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // 请求发送的数据，适用于 PUT, POST, 和 PATCH
  // 在没有设置 transformRequest 时，必须是以下类型之一：
  // string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // 浏览器专属：FormData, File, Blob
  // Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
  data: 数据

  // 指定请求超时毫秒数(0 表示无超时时间)
  timeout: 1000,

  // 表示跨域请求时是否需要使用凭证，默认 false
  withCredentials: false, 

  // 表示应该使用 HTTP 基础验证，并提供凭据，该参数会在 headers 设置 Authorization
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // 表示服务器响应的数据类型，
  // 支持类型：arraybuffer, blob, document, json（默认）, text, stream
  responseType: 'json', 

  // 用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', 

  //  xsrf token 值的 HTTP 头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', 

  // 上传处理进度事件
  onUploadProgress: function (progressEvent) {
  },

  // 下载处理进度事件
  onDownloadProgress: function (progressEvent) {
  },

  // 响应内容的最大尺寸
  maxContentLength: 2000,

  // 定义对于给定的HTTP 响应状态码。
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },

  // 定义在 node.js 中 follow 的最大重定向数目，为0将不会 follow 任何重定向
  maxRedirects: 5, 

  // 在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
}).then(response =>  {
    console.log(response);
}).catch(error =>  {
    console.log(error);
});

//封装时的暴露调用
export default {
    get,
    post,
    fileUpload,
    del,
    put,
    putstatus
}

请求拦截

// request拦截器
httpService.interceptors.request.use(
    config => {
        console.log(config.url);
        return config;
    },
    error => {
        // 请求错误处理
        Promise.reject(error);
    }

响应拦截器

httpService.interceptors.response.use(
    response => {
        // 统一处理状态
        // const res = response.data;
        // if (res.statuscode != 1) {
        //     // 返回异常
        //     return Promise.reject({
        //         status: res.statuscode,
        //         message: res.message
        //     });
        // } else {
            return response.data;
        // }
    },
    // 处理处理
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求';
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `未知错误${error.response.status}`;
            }
        } else {
            error.message = "连接到服务器失败";
        }
        return Promise.reject(error);
    }
)