# axios

# 1. 为什么选择axios

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

# 2. axios请求方式

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]])

# 3. 请求演示

import axios from 'axios'

// 1. 没有参数
axios.get('http://152.136.185.210:8000/api/z8/category').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

// 2. 有请求参数
axios.get('http://152.136.185.210:8000/api/z8/home/data',
  {params: {type: 'sell', page: 1}})
  .then(res => console.log(res))
  .catch(err => console.log(err))

# 4. 发送并发请求

有时候, 我们可能需求同时发送两个请求

使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

import axios from 'axios'

// 3. 发送并发请求
axios.all([axios.get('http://152.136.185.210:8000/api/z8/category'),
  axios.get('http://152.136.185.210:8000/api/z8/home/data',
    {params: {type: 'sell', page: 3}})])
    .then(axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res2);
    }))

# 5. 全局配置

在上面的示例中, 我们的BaseURL是固定的

事实上, 在开发中可能很多参数都是固定的.
这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置、

import axios from 'axios'

// 4. 全局配置
axios.defaults.baseURL = 'http://152.136.185.210:8000/api/z8/';
axios.all([axios.get('category'),
  axios.get('home/data',
    {params: {type: 'sell', page: 3}})])
    .then(axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res2);
    }))

# 6. 常见的配置选项

请求地址 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'},
超时设置s timeout: 1000,
跨域是否带Token withCredentials: false,
自定义请求处理 adapter: function(resolve, reject, config){},
身份验证信息 auth: { uname: '', pwd: '12'},
响应的数据格式 json / blob /document /arraybuffer / text / stream responseType: 'json',

# 7. axios的实例

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

// 5.axios实例
const axiosInstancce = axios.create({
  baseURL: 'http://152.136.185.210:8000/api/z8/',
  timeout: 5000,
  beaders: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

axiosInstancce({
  url: '/category',
  method: 'get'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
```

# 8. axios的封装

为什么需要封装

如果不封装的话，我们就需要在每一个js文件中引入axios，一旦asios框架出现问题，我们就需要修改每一个js文件，如果使用封装的话，我们只需要修改封装后的js文件即可

import axios from 'axios'

export default function request(option) {
  // 1. 创建axios实例
  const axiosInstance = axios.create({
    baseURL: 'http://152.136.185.210:8000/api/z8/',
    timeout: 5000,
    beaders: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

  // 2. 传入对象进行网络请求
  return axiosInstance(option)
}

import requet from './network/request'

// 6. axios封装请求
requet('/category').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

# 9. 拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

import axios from 'axios'

export default function request(option) {
  // 1. 创建axios实例
  const axiosInstance = axios.create({
    baseURL: 'http://152.136.185.210:8000/api/z8/',
    timeout: 5000,
    beaders: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

  // 2. 配置请求和响应拦截
  axiosInstance.interceptors.request.use(config => {
    console.log('来到了request拦截success中');
    // 1. 当发送网络请求时，在页面中添加一个loading组件，作为动画
    // 2. 某些请求要求用户必须登陆，判断用户是否有token，如果没有token跳转到login页面
    // 3. 对请求的参数进行序列化
    // config.data = qs.stringify(config.data)
    // console.log(config);
    // 如果这里不返回config请求将不继续进行
    return config;
  }, err => {
    return err;
  })

  axiosInstance.interceptors.response.use(response => {
    // 响应成功的拦截中，主要时对数据进行过滤
    console.log('来到了response拦截success中');
    return response.data
  }, err => {
    // 响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面
    console.log('来到了response拦截fail中');
    return err
  })

  // 3. 传入对象进行网络请求
  return axiosInstance(option)
}