一、安装axios
cnpm install axios
二、简单封装
1、新建axios.js文件
2、import axios from 'axios'
3、创建axios实例
export function request (config) {
  const instance = axios.create({
    baseURL: 'https://vuial.cn/',
    timeout: 5000
  })
}
三、使用
import {request} from '@/network/axios'

request({
  url: 'wenjian/php/yy.php?name=vuial'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
四、axios配置相关

需注意:请求方式与传参问题,get---params、post---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 },

查询对象序列化函数---aramsSerializer: 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',

五、axios并发请求

使用axios.all, 可以放入多个请求的数组.

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

六、拦截器使用场景
页面发送http请求,很多情况我们要对请求和其响应进行特定的处理;如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣。好在强大的axios为开发者提供了这样一个API:拦截器。拦截器分为 请求(request)拦截器和 响应(response)拦截器。
- 缓存;
- 同时发几个请求,再把结果合并;
- 统一处理超时、错误、重定向;
- 管理请求的地址、在 header 里头加需要的标识;
- 抽取返回数据中需要的部分,转化返回数据的格式;
- 把图片压缩;
七、拦截器的使用
import axios from 'axios'
import qs from 'qs'

export function request (config) {
  // 创建axios实例
  const instance = axios.create({
    baseURL: 'https://vuial.cn/',
    timeout: 5000
  })
  // 配置请求和响应拦截
  instance.interceptors.request.use(config => {
    console.log('来到了request拦截success中')
    // 1.当发送网络请求时, 在页面中添加一个loading组件, 作为动画1
    // 2.某些请求要求用户必须登录, 判断用户是否有token, 如果没有token跳转到login页面
    // 3.对请求的参数进行序列化(看服务器是否需要序列化)
    config.data = qs.stringify(config.data)
    console.log(config)
    // 4.等等
    return config
  }, err => {
    console.log('来到了request拦截failure中')
    return err
  })

  instance.interceptors.response.use(response => {
    console.log('来到了response拦截success中')
    return response.data
  }, err => {
    console.log('来到了response拦截failure中')
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = '请求错误'
          break
        case 401:
          err.message = '未授权的访问'
          break
      }
    }
    return err
  })
  return instance(config)
}