异步相关知识点首先先明确js是单线程的语言，一般情况下都是自上而下进行的，也就是常说的同步。同步和异步是什么？同步：

首先先明确js是单线程的语言，一般情况下都是自上而下进行的，也就是常说的同步。

同步和异步是什么？

同步：进程执行遵循从上而下的顺序，如果发起了一个请求就必须得到响应后才能继续向下，否则进程就会一直停下来等下去。
异步：异步和同步最大的区别就是异步不需要一直等下去，会继续执行下面的操作，当有请求收到回复后会回去处理，这样的话可以实现不用关心请求什么时候发送，以及请求什么时候被处理。

Ajax相关知识

Ajax是什么？

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。无需重新加载整个页面，只更新部分页面的前端技术。这里强调它是一种技术，或者说是一种思想，所以实现方式有多种，包括原生JS实现和JQuery实现等。

Ajax工作原理

客户端请求交给Ajax代为处理，请求由Ajax向服务器发送，得到响应后通过回调函数通知客户端，这样的话实现浏览器不必等待服务器响应。

JQuery实现

Ajax请求的语法：$.ajax([settings])
GET请求：$.get(url,[data],[callback],[type])
POST请求：$.post(url,[data],[callback],[type])

$.ajax({
    url:"",
    data:{},
    type:"post/get",
    async:true,
    dataType:"text",
    success:function(obj){},
    error:function(){}    
})

url：请求的服务端的URL地址，与form表单的action一样 data：前台需要后台传递的数据，说人话就是传参 type：请求类型，与form表单中的method对应 async：表示异步同步，true为异步，false为同步 dataType：回传的数据类型，text、xml、html、json success：成功的回调函数，参数obj表示返回值(就是服务端返回的数据，经常用一个结果包装类返回) error：失败的回调函数，一般不写

$.get(url,[data],[callback],[type]);

url：请求的服务端的URL地址，与form表单的action一样 data：前台需要后台传递的数据，说人话就是传参 callback：请求成功后的回调函数，可以在函数体中编写我们的逻辑代码 type：回传的数据类型，text、xml、html、json：请求类型，与form表单中的method对应

Axios和Ajax的区别

Ajax是对原生XHR的封装
Axios是基于Promise的Http库，实现了对Ajax的封装，相当于对原生的XHR的二次封装

Axios相关知识

如何使用

发起一个post请求

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

用get请求获取远程图片

axios({
    method: 'post',
    url: '/http://bit.ly/2mTM3nY',
    responseType: 'stream'
}).then(function (res) {
    res.data.pipe(fs.createWriteStream('aa.jpg'))
    });

别名式写法

axios.requests(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.post(url[,config])
axios.put(url[,config])

GET请求示例

axios.get('/user?ID=12345'，{
    params: {
        ID: 12345
    }
    })
    .then(function(res) {
        console.log(res);
    }).catch(function(err) {
        console.log(err);
    }).finally(function() {
    });

这里只强调一点，params是包裹在{}里的，而且这是get请求才这样写，post请求里用的是{}直接包裹，没有params
以下是另一种async/await写法

// 支持async/await用法 
async function getUser() { 
    try { 
        const response = await axios.get('/user?ID=12345'); 
        console.log(response); 
    } catch (error) { 
        console.error(error); 
    } 
}

POST请求示例

axios.get('/user?ID=12345'，{
        firstName: 'Gao',
        lastName: 'zhenyang'
    }
    })
    .then(function(res) {
        console.log(res);
    }).catch(function(err) {
        console.log(err);
    }).finally(function() {
    });

并发多个请求

可以看到并发多个请求，理论上每一个请求都会有对应的响应，这里用一个results数组接收响应结果 ``js function getUserAccount() { return axios.get('/user/12345'); }

function getUserPermissions() { return axios.get('/user/12345/permissions'); }

Promise.all([getUserAccount(), getUserPermissions()]) .then(function (results) { const acct = results[0]; const perm = results[1]; });

如果不使用别名，也可以用普通的配置方法

axios(config)：这里关注config是配置，里面很多可选项，config本身是一个对象，也是在拦截器中用的那个config
axios(url[,config])

只不过使用别名时，URL、method、data都不需要在配置中指定

响应结构

其中data经常会是后端处理时自行封装的的通用返回类

{ 
    // `data` 由服务器提供的响应 
    data: {}, 
    // status` 来自服务器响应的 HT。TP 状态码 
    status: 200, 
    // `statusText` 来自服务器响应的 HTTP 状态信息 
    statusText: 'OK', 
    // `headers` 是服务器响应头 
    // 所有的 header 名称都是小写，而且可以使用方括号语法访问 
    // 例如: `response.headers['content-type']` 
    headers: {}, 
    // `config` 是 `axios` 请求的配置信息 
    config: {}, 
    // `request` 是生成此响应的请求 
    // 在node.js中它是最后一个ClientRequest实例 (in redirects)， 
    // 在浏览器中则是 XMLHttpRequest 实例 
    request: {} 
}

配置优先级

优先级排序，全局配置<实例的default<请求中的配置

/ 使用库提供的默认配置创建实例 
// 此时超时配置的默认值是 `0` 
const instance = axios.create(); 
// 重写库的超时默认值 
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时 instance.defaults.timeout = 2500; 
// 重写此请求的超时时间，因为该请求需要很长时间 instance.get('/longRequest', { timeout: 5000 });