拦截器

• 添加拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // config 应该是请求的配置和传参
    return config;

    // 还可以返回 promise.reject 来拒绝请求
    return Promise.reject(error);
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器，可以为自定义 axios 实例添加拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // error.config 包含了 axios 请求的参数，包括 url 和 method
    // 对响应错误做点什么
    return Promise.reject(error);
  });

• 移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

• 可以为自定义 axios 实例添加拦截器

—————————————————————————————————————————————————————————

响应结构

• then

{
  // `data` 由服务器提供的响应
  data: {},    // 不一定为对象

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}

  // `request` 代表生成此相应请求的对象
  // 在node.js 中如果有重定向，它指向最后一个重定向产生的请求
  // 在浏览器中它是一个 XMLHttpRequest实例
  request: {}
}

• 在使用 catch 时，或传递 rejection callback 作为 then 的第二个参数时，响应可以通过 error 对象获取（catch函数中 error.response 返回完整的响应，包括staue等）
  • promise 中使用 catch 只是 then 的语法糖，实际就是 then(undefined, catchFun) 的简易写法

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
    // 没有response.request
  });

—————————————————————————————————————————————————————————

错误处理

// 错误有以下几种
// 请求发起失败
// 请求发起成功，没有任何响应（响应错误）
// 成功响应，响应返回 200 以外的值？
axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已经发起，服务器已经返回了响应状态码
      // 状态码不是 2xx 时（需要使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。）
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 响应错误时（请求已发出，未收到响应，例如超时）
      // `error.request` 在浏览器中是 XMLHttpRequest 实例
      // 在 node.js 中是 http.ClientRequest 实例 
      console.log(error.request);
    } else {
      // 请求发起错误（请求未正确发起）
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

—————————————————————————————————————————————————————————

发起请求

axios.request(config)：实际上所有aixos请求的创建都是request方法来实现的。

axios.request({
     url: "http://example.com",
     method: "get",
     headers:{
         Cookie: "cookie1=value; cookie2=value; cookie3=value;"
     } 
}).then(...)

axios(config)：传递相关配置来创建请求

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream' // responseType表示期望服务器响应的数据类型
})
  .then(function(response) {
    // pipie nodejs中对流数据的一种操作
    // fs nodejs中文件对象
    // fs.createWriteStream 保存文件
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])：发送 GET 请求

// 发送 GET 请求（默认的方法）
axios('/user/12345');

axios.get(url[, config])

axios.get('/user?ID=12345')
// 可写为
axios.get('/user', {
    params: {
      ID: 12345
    }
  })

axios.delete(url[, config])

axios.head(url[, config])

• HEAD跟get很像，但是不返回响应体信息，用于检查对象是否存在，并获取包含在响应消息头中的信息。

axios.post(url[, data[, config]])

• post 向指定资源提交数据进行处理的请求，用于添加新的内容。

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })

axios.put(url[, data[, config]])

• put 向指定资源位置上传其最新的内容，用于修改某个内容。（存在则替换，不存在则创建。）

axios.patch(url[, data[, config]])

• patch 用来更新局部资源，相对于put而言
• PATCH是幂等的，幂等是指这个请求任意多次执行所产生的影响均与一次执行的影响相同

请求 - axios