在vue项目中封装axios

在哪里封装：

封装axios，src文件夹下新建一个util的文件夹，这个文件夹就是放一些工具的，可以在这里面封装axios。新建一个js文件，这里是在http.js文件里封装axios

封装axios的第一种方案：函数法

方法：先导入axios，然后按照函数封装的办法封装，要有返回值，然后export导出对象，对象里面是各种函数。 

在外部使用：

导入http文件：

因为http文件导出的是一个对象，所以用的时候像下面这样；

axios第二种封装办法：axios自带的封装方法

以后不用axios来请求，而是用axios创建的实例http来请求：

// 2-对于数据的封装方法：
import axios from 'axios'
const http = axios.create({
  baseURL: 'https://m.maizuo.com',
  timeout: 10000,
  headers: {
    'X-Client-Info':
    '{"a":"3000","ch":"1002","v":"5.2.1","e":"16661470114057618813288449","bc":"440100"}'
  }
})
export default http

用axios.create()创建一个实例http，以后这个http实例就代表axios本身了。这个用的是axios自己的一种方式，来做的自定义配置。导出http即可使用。

参数说明： 

baseURL：指的是网址的域名+(端口号)

timeout：请求数据限制的时间范围

headers：数据验证里的“X-Client-Info”，这个字段是大多时候是重复的

上面代码的含义是：

每次往baseURL这个地址发请求，如果请求10s数据没回来就超时了，每次请求都会带上这个headers。

使用方式：

这样在使用的时候就可以拿http直接来用了，url中把公共的域名去掉（也就是去掉baseURL里的域名），headers中把相同的x-Client-Info去掉：（每个网站信息不一样也正是因为‘X-Host’字段不一样。）