http请求分析 I axios

http请求过程

• 域名解析
• 发起TCP的三次握手
• 建立TCP连接后发起 http 请求
• 服务器响应 http 请求，返回 HTML 代码 给浏览器
• 浏览器解析 HTML 代码，并请求 HTML 代码中的资源（css,js,img等）
• 浏览器对页面进行渲染，呈现给用户

http header ==》请求头

• HTTP Headers是HTTP请求和响应的核心，它承载了关于客户端浏览器，请求页面，服务器等相关的信息。

  
  

• 打开浏览器调试工具，点开network，刷新后可以看到页面请求的网络资源（API，调用方法与返回数据等）

  
  Paste_Image.png
• 分析请求头信息
  HEAD: 仅请求响应首部
  GET: 完整请求一个资源 （常用）
  POST：新增，提交
  PUT: 提交修改
  DELETE：删除

使用微信开发者工具

• 对于基于微信的开发项目，一般使用微信开发者工具来进行项目调试。跟google命令行几乎一致。
• 可以把微信中的网址粘贴到开发者工具中看，就可以调试，并且可以看到 token 等信息【通过微信为入口的项目一般不能直接在浏览器打开，会提示在微信客户端打开】

axios

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

promise

// 在一个数组的异步调用结束后才执行方法：可以先将创建的promise堆在数组中，在使用promise.all，这能保证一个数组的方法都执行完，拿到结果才下一步操作
  var promiseArray = [];
        for (var i = 0; i < 10; i++) {
            promiseArray.push(createPromise());
        }
        Promise.all(promiseArray).then(function() {
             for (i = 0; i < data.length; i++){
                 console.log(i);
            }
        })