axios请求的服务器网站,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);

}

})