fetch axios 串行执行时阻塞响应

前言：在js中，我们都是通过ajax发送异步请求，而我们在异步末尾需要做一些事，比如说用响应体去渲染页面，这时就需要用到回调函数，使用promise是用来解决回调地狱的，后来的jquery把ajax进行了封装，虽然解决了兼容性问题，但是并没有解决回调地狱的问题。后来官方直接封装了fetch（XMLHttpRequest + promise）方法，可以直接使用。在vue2.0之后，很多人开始使用axios发送异步请求，axios也是基于XMLHttpRequest 和 promise进行封装的，功能比fetch更强大，强大之处就在于axios里存在拦截和并发请求。

axios的使用

        1.下载：通过npm下载（在项目根目录下）

                cnpm install axios --save

        2.导入：在哪里使用axios，就需要在哪里导入

                

import axios from 'axios'

        3.axios发送请求的方式有5种，分别是get post delete put patch，但是根据发送请求的方式可以分为2大类，get delete一类，剩下的为一类。下面以get post 为代表 

3-1 get

import axios from 'axios'
//参数1为请求地址，参数2为配置项
axios.get('http://localhost:8080', {
    params: {
        key:'gxn759',
        id: 1
    }

}).then(res => {console.log(res)}, err => {console.log(err)})



axios.post('http://localhost:8080', {
        key:'gxn759',
        id: 1
   

}).then(res => {console.log(res)}, err => {console.log(err)})

//请求URL:http://localhost:8080/test/first

//创建axios实例
const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 3000,
    //这里的token不一定全是token，就是每次请求都必须要带的一个身份标识
    token: 

})

//发送请求  方式1
instance.get('/test/first', {
    params: {
    //发送请求需要带的参数，会把参数拼接在URL上
    id: 1
    }
}).then(res => {console.log(res)}, err => {console.log(err)});

//方式2
instance ({
    method: 'get',
    url: '/test/first',
    params: {
        id: 1
    }
}).then(res => {console.log(res)}, err => {console.log(err)});

3-2 post           

//请求URL:http://localhost:8080/test/first

//创建axios实例
const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 3000,
    //这里的token不一定全是token，就是每次请求都必须要带的一个身份标识
    token: 

})

//方式1
instance.post('/test/first', {

    id: 1
}).then(res => {console.log(res)}, err=> {console.log(err)});

//方式2
instance({
    method: 'post',
    url: '/test/first',
    data: {
        //会将参数放到请求体中
        id: 1
    }
}).then(res => {console.log(res)}, err=> {console.log(err)});

   4.发送并发请求

import axios form 'axios'
//创建axios实例
const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 3000,
    //这里的token不一定全是token，就是每次请求都必须要带的一个身份标识
    token: 

})

axios.all([
    instance.get('/test/first', {params: {id:1}}),
    instance.post('/test/first', {id:1})
]).then(instance.spread((res1, res2) => {
    //res1, res2分别代表两次请求的结果
    console.log(res1); 
    console.log(res2)
})

)

5.请求拦截器

        拦截器：在发送请求或者接受响应之前拦截

import axios form 'axios'
//创建axios实例
const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 3000,
    //这里的token不一定全是token，就是每次请求都必须要带的一个身份标识
    token: 

})

//请求拦截
const i = instance.interceptors.request.use(config => {
    //config是请求信息
    //请求发送前的处理，
    
    return config;   //只有返回config，才会把请求发出去
    
}, err => {return Promise.reject(err)})
//响应拦截
instance.interceptors.response.use(res => {
    //在这里，可以对响应体做一些处理
    return res;    //这里返回的res会传到请求方法的响应对象中

}, err => {return Promise.reject(err)})

//取消拦截
instance.interceptors.request.eject(i);

6.错误处理

请求/响应拦截器出现错误时，返回的err对象会传给当前函数的err对象

那么发送请求就可以这样写

instance.get('/test/first', {
    params: {
    //发送请求需要带的参数，会把参数拼接在URL上
    id: 1
    }
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})    //拦截器返回的err对象会被传递到这里

7.取消请求

let source = instance.CancelToken.source();

instance.get('/test/first',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消请求后会执行该方法
				console.log(err)
			})

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

8.   post请求一般分为两种类型

• form-data 表单提交，图片上传、文件上传时用该类型比较多
• application/json 一般是用于 ajax 异步请求

   form-data请求(把data参数的值写为：formData)

        

let data = {};    //请求参数
let formData = new FormData();
for(let key in data) {
    formData.append(key, data[key])
}
instance.post('/test/first', formData).then(res => {console.log(res)}, err=>{console.log(err)})