由浅入深axios

传统Ajax、jQquery-Ajax、Vue-resource、axios。。。。网络请求哪家强？vue框架就选axios，成功不是高瞻远瞩，而是你本来就站在高处。

---

前言-网络模块选择

一、传统Ajax
传统Ajax是基于XMLHttprequest(XHR)

非常好解释，配置和调用方式非常混乱
封装起来也是很很蛋疼难受
懂原理就行，真实开发中很少直接使用，二是使用jQuery-Ajax

二、jQuery-Ajax
相对传统Ajax的确非常好用

首先明确，在Vue的整个开发中是不需要使用jQuery了
jQuery的代码1w行，Vue的代码也才1w行
完全没必要为了网络请求就引用jQuery

三、Vue-resource
官方推出，体积比jQuery小

2.0后不再更新和维护
对项目开发维护有很大隐患

四、jsonp了解一下

利用script标签，来下载

Jsonp(JSON with Padding) 是 json 的一种"使用模式".
可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

利用 < script > 元素的这个开放策略（导入脚本src的内容可以不是本网站的即跨域的），网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

五、axios
好处大大滴优

 在浏览器中发送XMLHttpRequest请求
 在node.js中发生http请求
 支持Promise API
 拦截请求和响应
 转换请求和响应数据

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、上手：axios

1、npm安装

#运行时需要，因此非--save-dev
npm install axios --save

2、导入

import axios from 'axios'

3、使用

01、简单使用：

//该方法默认请求get，传入method:'请求方式'可改
    axios({
        url:'后台接口地址',
        method:'请求方式'
    }).then(res=>{
        console.log(res);
    })

02、带参数使用：

    //携带参数时，get可以直接拼接到地址上去
    //该方法默认请求get，传入method:'请求方式'可改
    axios({
        url:'后台接口地址',
        params:{
            //键值对
            age='1',
            name='zhangsan'
        },
        method:'请求方式'
    }).then(res=>{
        console.log(res);
    })

---

二、并发请求-全局配置

1.axios发送并发请求

还记得上一篇的promise发送并发请求吗？记得回去比较参悟。

axios发送并发请求：

axios.all([

        axios({
            url:''
        }),
        axios({
            url:''
        })

    ]).then(axios.spread((res1,res2)=>{

    })) 

promise的all使用：

Promise.all([

       //第一个promise
       new Promise((resolve,reject)=>{
           resolve();
       }).then(),

       //第二个promise
       new Promise((resolve,reject)=>{
           resolve()
       }).then();

   ]).then(results =>{
       //等两个都完成，使用results[0],results[1]
   })

2.axios全局配置

我们先上代码看一下，axios的配置相关信息：

axios({
        baseUrl:'123.123.123.123',
        timeout:1000,
        url:'/home',
        params:{
            //键值对
            age='1',
            name='zhangsan'
        },
        method:'请求方式'
    }).then(res=>{
        console.log(res);
    })

对于以上配置，我们甚至可以单独抽取出来,提取为全局相关配置

axios.defaults.baseUrl='123.123.123.123'
axios.defaults.timeout=1000
axios.defaults.headers.post['ContentType']='application/x-222-form-urlencoded'

更多详看官方文档，了解就好，需要时去查

---

三、axios实例和模块封装

1、场景描述：

当我们从axios模块导入对象时，使用的实例是默认的实例
当给该实例设置一些默认配置时，这些配置就被固定下来了
但是后续开发中，某些配置可能不太一样
比如默写请求需要使用特定的baseURL或者timeout或者content-Type等
这个时候，就可以创建新的实例，并且传入该实例的配置信息

土话一言之：业务复杂时，单纯提取全局配置不好，因为不是所有地址都是baseURL。

2、axios实例，简单示范：

//创建对应的axios实例，利用axios.create
 const instance1 = axios.create({
     baseURL:'',
     timeout:1000
 })

//用法还是和axios普通使用一样
//毕竟有了baseURL，直接给个路径拼接就好
 instance1({
     url:'/home'
 }).then(res => {
      console.log(res)
 })

 instance1({
     url:'/home',
     params:{
         age:18,
         name:'张三'
     }
 }).then(res => {
      console.log(res)
 })

3、封装

由于每个组件都要导入axios，写一大串，实在有够麻烦
解决办法：封装

   单独创建文件夹network
   创建request.js文件
   编写request.js 
   开启封装之路

封装_方式一(回调)

success,failure函数作为回调函数

//success,failure函数作为回调函数
   export function request(config,success,failure){
     //创建axios实例
      const instance = axios.create({
        baseURL:'kzbrise68',
        timeout:1000
      })
     //发送真正的网络请求
      instance(config)
      .then(res => {
          success(res);
      })
      .catch(err => {
          failure(err)
      })
   }

使用：

//例如main.js
   import {request} from "./network/request"

   request({
       url:'/home'
   },res => {
       console.log(res)
   },err => {
       console.log(err)
   })

封装_方式二(回调 高级)

方式一 升级款：高级简写-将参数都丢对象里

 export function request(config){
     //创建axios实例
      const instance = axios.create({
        baseURL:'kzbrise68',
        timeout:1000
      })

      instance(config.baseconfig)
      .then(res => {
          config.success(res);
      })
      .catch(err => {
          config.failure(err)
      })
   }

使用：

  import {request} from "./network/request"

   request({
       baseconfig{
           url:'/home'
       }，
       ,res => {
       console.log(res)
       ,}err => {
       console.log(err)
   }
   })

封装_方式三(Promise)

export function request(config){
     return new Promise((resolve,reject) => {
         //创建axios实例
      const instance = axios.create({
        baseURL:'',
        timeout:1000
      })

      instance(config)
      .then(res => {
          resolve(res);
      })
      .catch(err => {
          reject(err)
      })
     })
   }

使用:

 import {request} from "./network/request"

   request({
       url:''
   })
   .then(res => {
       console.log(res);
   })
   .catch(err => {
       console.log(err);
   })

封装_方式四(Promise 高级)_最终方案

因为axios本身就是返回promise的缘故，因此：

export function request(config){
    
      const instance = axios.create({
        baseURL:'',
        timeout:1000
      })

      return instance(config);
     }

使用：

import {request} from "./network/request"

   request({
       url:''
   })
   .then(res => {
       console.log(res);
   })
   .catch(err => {
       console.log(err);
   })

---

四、axios拦截器

1、场景描述：

为了拼接一些东西，拦截一些东西，请求的时候加个动画···种种

----总之为了把请求过程拦截下来
axios提供了拦截器
用于我们在发送每次请求或者得到相应后，进行对应处理。

以下代码写在 封装的axios中，其中axios用实例名替代

2、拦截器 简单示范

请求：
axios.interceptors.request.use(config => {
    //发送成功
    console.log(config);
    //拦截完记得还回去
    return config;
},err => {
    //发送失败,一般不会发送失败
    console.log(err)
})

3、常见使用情景

情景一：

config中的信息不符合服务器要求
修改头文件，使得符合跨域，拦截config，改一下再放回去

情景二：

每次发送网络请求时，都希望再界面中显示一个请求的图标
在发送拦截时，show()。在响应拦截时，close()。

情景三：

某些网络请求(如登录（token）)，这种必须携带一些特殊信息的
给它拦截下来，然后跳转到登录页面

总结

axios使用还是比ajax简单的，当然ajax原理还是要知道的。
axios是基于promise的，因此封装十分方便。直接返回实例就好，剩下的then直接可以.出来。
拦截器拦截完记得返回。