07-快速上手axios

Axios，可以理解为 ajax i/o systemAxios ，是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests：

1. 在浏览器中创建 XMLHttpRequest 请求
2. 在 node.js 中发送http请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消要求
7. 自动转换 JSON 数据
8. 客户端支持防止 CSRF/XSRF (跨域请求伪造)

更多详情请点击官网
下面我将结合 vue-cli 和 node 第三方包来对axios进行快速使用，不会vue-cli请点击

一、安装

        打开我们创建好的脚手架(脚手架最好带router)，打开 终端 或者 cmd 找到我们所写的文件 输入npm install axios --save

二、基础使用

2.1、axios导入

import axios from 'axios'

2.2、创建axios实例

axios常见参数：

• url：请求的接口路径
• method(可选)：请求的方式，可以是get、post、put、delete、head、options等等（默认不写为get请求）
• params(可选)：在get请求方式下携带的参数，即端口？后的参数
• data(可选)：在post请求方式下携带的参数

前面说过axios是基于promise网络请求库的，所以它可以像使用promise一样进行异步回调，如下可以用：

• .then来异步获取请求的数据，
• .catch来异步获取请求的报错

注意：请求的接口路径是后端人员提供给我们的，如果后端人员未提供，我们也可以先利用mockjs去模拟数据接口

axios({
    url: "请求的接口路径",
    method: '请求的方式',
    params: {
            type: 'sell',
            page: 5
        }
}).then(res =>
    console.log(res)
).catch(error =>
    console.log(error)
)

2.3、以上就是我们使用axios的基本步骤，下面演示全部代码以及结果

三、进阶使用

3.1、axios简写

        当我们要用的url的路径太长并且要多次使用的时候，我们可以把其基础的路径利用axios.defaults提取出来。如下

axios.defaults.baseURL = 'http://www/8080'
axios.defaults.timeout = 5000

axios({
    url: "home", //这里axios会自动帮我们拼接地址，相当于http://www/8080/home
    method: 'get'
}).then(res =>
    console.log(res)
).catch(error =>
    console.log(error)
)

3.2、axios并发请求

        当我们想要同时满足多个请求条件时再进行数据传送，我们也可以利用 axios 所提供的创建实例方法：axios.all

3.3、axios局部实例

        以上我们定义的全部是axios全局实例，如果我们想使用局部的axios，也非常的简单。利用axios.create来创建局部实例，给它一个变量保存，我们在下面就可以多次调用了。具体使用如下：

const instance1 = axios.create({
    baseURL: 'http://www/8080',
    timeout: 5000
})

instance1({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
})

instance1({
    url: '/home/data',
    params: {
        type: 'sell',
        page: 5
    }
}).then(res => {
    console.log(res);
})

3.4、axios拦截器与响应器

3.4.1、axios拦截器

       拦截器request是指当发送请求或者得到响应被then或catch处理之前对数据进行拦截，拦截后可对数据做一些处理，比如：

1. 给请求数据添加头部信息，或对响应数据进行序列化，然后再传给浏览器，这些都可以在拦截器中进行
2. 每次发送网络请求时，都希望在界面中显示一个请求图标
3. config中的一些信息不符合服务器的要求
4. 某些网络请求（比如登录（token）），必须携带一些特殊的信息

注意：拦截的数据一定要返回，否则无法取到数据

//对instance数据进行拦截，instance是一个axios局部实例对象
instance.interceptors.request.use(config => {
   console.log(config);
   return config
}, err => {
   console.log(err);
});

3.5.1、axios响应器

       响应器response是指拦当数据响应前对数据进行一下处理，往往数据可能夹杂很多我们不需要的内容，我们可以利用响应器对其进行过滤筛选。

注意：拦截的数据一定要返回，否则无法取到数据

//对instance数据进行拦截，instance是一个axios局部实例对象
instance.interceptors.response.use(res => {
    return res.data
}, err => {
        console.log(err);
});

三、封装