axios网络请求

淘汰ajax，jquery ajax，选择axios

axios名称的由来? 个人理解
axios: ajax i/o system

请求方式

axios(config) //默认请求方式
axios.request(config)
axios.get(url,{config})
axios.delete(url,{config})
axios.head(url,{config})
axios.post(url,data,{config})
axios.put(url,data,{config})
axios.patch(url,data,{config})

axios的使用

安装axios
npm install axios --save
这里使用第一种请求方式axios(config)
config配置属性
url:'http://被请求的接口',
method:'get或post',
params:{针对get请求的参数拼接},
data:{针对post请求时参数获取}
axios支持promise，成功后回调then，失败回调catch

axios并发请求

使用方法和promist.all一样。
在axios.all([])放入并发请求的axios，都请求成功后在then中回调

axios.all([])返回的是一个数组，axios还提供了axios.spread，
它可以将数组展开使用，res1,res2,,

  //这个httpbin.org网站可以做很多网络请求模拟，没有接口可以尝试用这个
  axios.all([
    axios({
      url:'接口1',
    }),
    axios({
      url:'接口2',
      params:{
        type:'pop',
        page:1
      }
    })
  ]).then(axios.spread((res1,res2) => {
    console.log(res1);
    console.log(res2);
  }))

如果想两个接口内容相同，我们只需获取一个接口的话，请参考axios封装第二步，封装两个接口，
在catch中使用接口2并传入参数即可。

全局配置

把一些固定的参数抽取出来进行全局配置

axios.defaults.timeout = 1000
axios.defaults.baseURL = '基础接口';
//后面设置url的时候只需写路径即可，如/home/data

常见的配置选项

请求地址
- url: '/user',
请求类型
- method: 'get',
请根路径
- baseURL: 'http://www.mt.com/api',
请求前的数据处理
- transformRequest:[function(data){}],
请求后的数据处理
- transformResponse: [function(data){}],
自定义的请求头
- headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象
- params:{ id: 12 },
查询对象序列化函数
- paramsSerializer: function(params){ }
request body
- data: { key: 'aa'},
超时设置
- timeout: 1000,
跨域是否带Token
- withCredentials: false,
自定义请求处理
- adapter: function(resolve, reject, config){},
身份验证信息
- auth: { uname: '', pwd: '12'},
响应的数据格式 json / blob /document /arraybuffer / text / stream
- responseType: 'json',

axios实例

在开发中有可能我们用的不是一个接口，这个时候使用全局配置就无法获取多个接口了

我们可以创建一个axios实例，一个实例对应一个接口和相应配置，提高开发效率。

创建实例中基础配置
const instance1 = axios.create({
baseURL:'基础接口',
timeout:5000
})
使用实例和配置路径等
instance1({
url:'路径1',
params:{}
}).then(rel =>{
console.log(rel)
})
当有多个接口配置多个实例即可

axios封装

在网络开发中，我们使用第三方插件有可能出现第三方插件重大bug或不再维护的情况

当出问题时多个页面修改第三方插件是一件很麻烦的事，所以我们可以封装一个文件作为代理

扫描二维码关注公众号，回复： 9223377 查看本文章

其他页面从代理中传入config并获取请求，当第三方插件失效只需修改代理文件即可，无需全部修改

一、回调式封装

封装代理文件，以函数形式导出。如多个接口可配置多个函数导出
函数内传入三个参数，config，success，failure。这里success和failure是函数。
在函数中配置axios实例，在实例then和catch中分别回调函数success和failure
在需要请求页面导入代理，调用并传入(config,success函数，failure函数)

二、 promise式封装

导出封装函数，函数中传入config参数。如多个接口可配置多个函数导出
函数中返回一个promise，在promise中嵌套axios实例
实例回调result中再使用promise的回调，把回调的结果返回出去
在请求页面导入，因已返回结果，所以直接传入axios配置，然后正常then/catch即可。
（就是在执行笔记：axios实例第2步）

    import axios from 'axios'

    export function request(config) {
      return new Promise((resolve, reject) => {
        const instance = axios.create({
          baseURL:'http://123.207.32.32:8000/api/hy',
          timeout:5000
        })

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

      })
    }

三、最终封装-由promise式改编（大道至简）

在axios实例中已经内置了promise，所以我们才能回调then/catch，

为什么我们还要再使用promise再回调一次呢，我们的目的是返回结果，

直接把axios实例返回出去不就好了嘛

import axios from 'axios'

export function request(config) {
    const instance = axios.create({
      baseURL:'http://123.207.32.32:8000/api/hy',
      timeout:5000
    })
    return instance(config)
}

啰嗦一句。这里不是export default导出。导入的话记得加import{} 花括号

* axios拦截器

全局拦截：
拦截器前面使用axios

局部拦截：
拦截器前面使用的是实例的名称

拦截四种方式：

request成功拦截

request失败拦截

  instance.interceptors.request.use(config =>{
    console.log(config);
    return config
  },error => {
    console.log(error);
  })

response成功拦截

response失败拦截

  instance.interceptors.response.use(result =>{
    console.log(result);
    return result.data
  },error => {
    console.log(error);
  })

拦截器需求列举

拦截一些config中不符合服务器要求的信息
发送请求时，都希望在界面中显示一个请求图标，如图片加载转圈
网络登入请求（token），没有特殊信息不允许登入

注意事项：

拦截器中use传入的是两个函数，result回调和error回调
request拦截成功后记得把数据再返回出去
response拦截成功后只需把data返回出去即可，其他东西是axios这个框架添加的
result拦截主要是对数据进行过滤，error拦截主要是根据错误跳转不同错误提示页面