比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同，比如1000ms、2000ms，这个时候，我们可以创建实例，利用axios实例进行网络请求。

思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：

<template>
  <div class="hello">......</div>
</template>

<script>
import axios from "axios";
// 场景：如果后端接口地址有多个，并且超时时长不一样，此时我们可以我们可以创建axios实例，利用axios实例进行网络请求
export default {
  name: "HelloWorld",
  created() {
    // 创建axios实例1
    let instance = axios.create({
      baseURL: "http://loacalhost:8080",
      timeout: 1000,
    });
    instance.get("/data.json").then((res) => {
      console.log(res);
    });
    // 创建axios实例2  ————倘若有两个域名或设置超时时长不一样，我们可以再创建一个axios实例
    let instance2 = axios.create({
      baseURL: "http://loacalhost:8081",
      timeout: 2000,
    });
    instance2.get("/city.json").then((res) => {
      console.log(res);
    });
  },
};
</script>
<style scoped>
</style>

备注：此时我们就可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且使用不同的配置。

👉 axios实例的相关配置

（1）配置列表：

- baseURL：请求的域名 / 基本地址。

- timeout：请求的超时时长，默认：1000毫秒(ms)，超过这个时长后端会报(返回)401超时。

备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。

- url：请求的路径。

- method：请求的方法。如：get、post、put、patch、delete等。

- headers：请求头。

- params：将请求参数拼接到url上

- data：将请求参数放置到请求体里

let instance = axios.create({
  // 创建实例时设置配置默
  baseURL: "", //请求的域名/基本地址
  timeout: 2000, //请求的超时时长，单位毫秒，默认。
  url: "/data.json", //请求路径
  method: "get", //请求方法
  headers: {
    //设置请求头————我们可以给请求头添加一些参数
    token: "",
    post: {
       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
  },
  params: { id: 5 }, //将请求参数拼接到url上
  data: { id: 5 }, //将请求参数放置到请求体里
});

（2）三种配置方式：

• axios全局配置

axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 2000

备注：在一个项目当中，我们经常存在需要多次请求同一个基本URL下的不同路由，如果每次发送请求都书写一遍基本URL无疑会产生大量的代码重复，因此，可以使用全局配置来简化代码。  默认配置 | Axios 中文文档 | Axios 中文网

• axios实例配置

let instance = axios.create();
instance.defaults.timeout = 3000

• axios请求配置

instance.get('/data.json',{
    timeout:5000
})

配置方式的优先级：axios全局配置 < axios实例配置 < axios请求配置

（3）常用参数配置的使用方法

• 示例1：

let instance1 = axios.create({
  baseURL: "http://localhost:9090",
  timeout: 1000,
});
instance1
  .get("/contactList", {
    params: {
      id: 5,
    },
  })
  .then((res) => {
    console.log(res);
  });

分析：配置的参数为baseURL：‘http://localhost:8080’，timeout:1000，method:‘get’，params:{ id:10}，url:’/contactList’

• 示例2：

let instance2 = axios.create({
  baseURL: "http://localhost:8081",
  timeout: 3000,
});
instance2
  .get("/contactList", {
    timeout: 5000,
  })
  .then((res) => {
    console.log(res);
  });

分析：配置的参数为baseURL：‘http://localhost:8081’，timeout:5000，method:‘get’，url:’/contactList’

注意：最终的有效配置是由优先级高的覆盖优先级低的。

2、拦截器

何为拦截器？就是在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器

（1）axios拦截器的使用方法

• 请求拦截器 ——在请求之前拦截请求

    // 添加请求拦截器
   /*需要拦截请求的原因
    *   1.config中包含了某些不符合服务器要求的信息
    *   2.发送网络请求的时候需要向用户展示一些加载中的图标
    *   3.网站需要登录才能请求资源，也就是需要token才能请求资源*/
    axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      console.log(config)
      return config; //拦截器里一定要记得将拦截的结果处理后返回，否则无法进行数据获取
    }, err=>{
        // 对请求错误做些什么 
        console.log(err)
        return Promise.reject(err) // 在请求错误的时候的逻辑处理
    });

  备注：可以为自定义 axios 实例添加拦截器 👇

  var instance = axios.create([config]);
  instance.interceptors.request.use(function () {/*...*/});
​

• 响应拦截器 ——在被then，catch处理前拦截响应 

    // 添加响应拦截器
    axios.interceptors.response.use(res => {
      // 在请求成功后的数据处理 
      console.log(res)
      return res.data; // 对响应数据做点什么
    }, err=>{
        // 对响应错误做些什么
        console.log(err)
        return Promise.reject(err)  // 在响应错误的时候的逻辑处理
    });

• 取消拦截器（了解）

	let inter = axios.interceptors.request.use(config=>{
        config.header={
            auth:true
        }
        return config
    })
    axios.interceptors.request.eject(inter)

🌲 封装网络请求函数 | 利用axios实例进行网络请求

基于以上知识点的梳理，我们就可以封装一个简单的request网络请求函数

在实际的项目中，我们不可能全程只发送一次网络请求，如果我们每进行一次网络请求就单独书写一个axios配置，将来如果axios不再进行维护或者项目需要更换其他的网络请求库的时候，需要重构的代码量无疑是巨大的。

因此，我们试想可不可以将网络请求单独抽离并封装为函数，进行网络请求的时候只需要调用对应的函数并且传入参数即可。这样将来即使需要更换请求库，也只需要对封装的函数进行修改而不是大量重构代码，可以大大减少工作量。

基于这样的需求，更推荐在项目中使用axios实例的方式进行网络请求。

export function request(config) {
    // 1. 创建axios实例
    const instance = axios.create({
      baseURL: "http://localhost:8080",
      timeout: 5000,
    });
    // ​2. axios拦截器的使用
    // 2.1 添加请求拦截器
    /** 需要拦截请求的原因
     *   1.config中包含了某些不符合服务器要求的信息
     *   2.发送网络请求的时候需要向用户展示一些加载中的图标
     *   3.网站需要登录才能请求资源，也就是需要token才能请求资源
     */
    instance.interceptors.request.use(
      (config) => {
        // 在发送请求之前做些什么
        return config; //拦截器里一定要记得将拦截的结果处理后返回，否则无法进行数据获取
      },
      (err) => {
        // 对请求错误做些什么
        return Promise.reject(err); // 在请求错误的时候的逻辑处理
      }
    );
    // 2.2 添加响应拦截器
    instance.interceptors.response.use(
      (res) => {
        // 在请求成功后对响应数据做处理
        return res; // 对响应数据做点什么
      },
      (err) => {
        // 对响应错误做些什么
        return Promise.reject(err); // 在响应错误的时候的逻辑处理
      }
    );
    // 3. 发送网络请求
    //axios实例本身返回的就是Promise对象，直接调用即可
    return instance(config);
}

上述代码就是一个简单的request网络请求函数封装，这样每次调用其进行网络请求的时候创建的都是一个单独的axios实例，可以进行更加灵活的配置。

需要值得注意的地方就是拦截器，拦截器会对请求和响应的结果进行一定的处理，不过配置拦截器后一定要记得将拦截的结果在最后放行。

（2） 实用示例

◾ 实用举例A：登录权限

结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行catch方法。

	// 请求拦截器
    axios.interceptors.request.use(
      config => {
        // 在发送请求前做些什么
        return config;
      },
      err => {
        // 在请求错误的时候的逻辑处理
        return Promise.reject(err);
      }
    );

    // 响应拦截器
    axios.interceptors.response.use(
      res => {
        // 在请求成功后的数据处理
        return res;
      },
      err => {
        // 在响应错误的时候的逻辑处理
        return Promise.reject(err);
      }
    ); 

	axios
      .get("/data.json")
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(res);
      });

在实际开发中，不会再每次网络请求的时候，都使用catch方法，可以添加统一的错误处理方法。代码如下：

    //  请求错误处理
    let instance = axios.create({});
    instance.interceptors.request.use(
      config => {
        return config;
      },
      err => {
        // 请求错误的常见状态码：4XX  401-请求超时  404-mot found
        $("#error").show();
        setTimeout(()=>{
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );

    // 响应错误处理
    instance.interceptors.response.use(
      res => {
        return res;
      },
      err => {
        // 响应错误的常见状态码 5XX 500-服务器错误 502-服务器重启
        $("#error").show();
        setTimeout(()=>{
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    instance.get("/data.json").then(res=>{
        console.log(res,'请求成功')
    }).catch(err=>{
        console.log(err,'除了拦截器设置的处理之外的其他处理')
    })

思路分析：首先创建实例，给实例设置请求拦截器与响应拦截器。

• （1）请求错误的常见状态码以4开头，如401-请求超时、404-接口未找到；

• （2）响应错误的常见状态码以5开头，如500-服务器错误、502-服务器重启等。

• （3）处理设置请求拦截器与响应拦截器的操作外，如果还要其他操作，我们可以在请求的时候，再使用catch方法。

3、取消请求（不常用，了解）

取消请求：用于取消正在进行的http请求（不常用，作为了解）

• 代码示例

<template>
  <div class="hello">取消请求</div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  created() {
    // 取消请求：用于取消正在进行的http请求（不常用，作为了解）
    let source = axios.CancelToken.source();
    axios
      .get("/data.json", {
        cancelToken: source.token,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });

    // 取消请求(其中，参数message是可选)
    source.cancel("自定义的字符串可选");
  },
};
</script>
<style scoped>
</style>

• 应用场景

在查询数据的时候，很长时间（3-5s）仍未获取数据，这个时候需要取消请求。

◼️ Axios进一步封装，在项目中的实际应用

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。axios有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

在一个完整的项目中，和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。

本文介绍的axios的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。提高代码的可读性和可维护性，减少、简化代码的书写，这也是封装的意义所在

代理

// Vue-CLI2旧版本代理
// Vue-CLI2需在 config/index.js 里配置
dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088
    proxyTable: {
      '/testIp': {
        target: 'http://197.82.15.15:8088',
        changeOrigin: true,
        pathRewrite: { 
          '^/testIp': ''
        }
      },
      '/elseIp': {
        target: 'http://182.83.19.15:8080',
        changeOrigin: true,
        pathRewrite: { 
          '^/esleIp': ''
        }
      },
    },

// Vue-CLI3新版本代理
// vue cil3需在 vue.config.js 文件里配置

    devServer: {
            overlay: { // 让浏览器 overlay 同时显示警告和错误
              warnings: true,
              errors: true
            },
            host: "localhost",
            port: 8080, // 端口号
            https: false, // https:{type:Boolean}
            open: false, // 配置后自动启动浏览器
            hotOnly: true, // 热更新
            // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
            proxy: { //配置多个代理
                "/testIp": {
                    target: "http://197.0.0.1:8088",
                    changeOrigin: true,
                    ws: true,//websocket支持
                    secure: false,
                    pathRewrite: {
                        "^/testIp": "/"
                    }
                },
                "/elseIp": {
                    target: "http://197.0.0.2:8088",
                    changeOrigin: true,
                    //ws: true,//websocket支持
                    secure: false,
                    pathRewrite: {
                        "^/elseIp": "/"
                    }
                },
            }
        }

当项目有多个后台的时候，可以在api文件夹下 新建一个elseApi.js  ，书写当前ip下的接口请求。方法同上，只是 let resquest = "/elseIp" 

封装 

* request.js

在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。 

/****   request.js   ****/
// 导入axios
import axios from "axios";
// 使用element-ui Message做消息提醒
import { Message } from "element-ui";
// 1. 创建新的axios实例，
const service = axios.create({
  // 公共接口--webpack中的全局变量process.env.BASE_API
  // 为了适应多个后台或者开发的时候的api地址和发布的时候的api地址不一样这种情况
  baseURL: process.env.BASE_API,
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000,
});
// 2. 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加

    config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded", // 配置请求头
    };
    //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
    const token = getCookie("名称"); // 这里取token之前，你肯定需要先拿到token,存一下
    if (token) {
      config.params = { token: token }; // 如果要求携带在参数中
      config.headers.token = token; // 如果要求携带在请求头中
    }

    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

// 3. 响应拦截器
service.interceptors.response.use(
  (response) => {
    //接收到响应数据并成功后的一些共有的处理，关闭loading等

    return response;
  },
  (error) => {
    /* ****  接收到异常响应的处理开始  **** */
    if (error && error.response) {
      // 1. 公共错误处理
      // 2. 根据响应码具体处理
      switch (error.response.status) {
        case 400:
          error.message = "错误请求";
          break;
        case 401:
          error.message = "未授权，请重新登录";
          break;
        case 403:
          error.message = "拒绝访问";
          break;
        case 404:
          error.message = "请求错误,未找到该资源";
          window.location.href = "/NotFound";
          break;
        case 405:
          error.message = "请求方法未允许";
          break;
        case 408:
          error.message = "请求超时";
          break;
        case 500:
          error.message = "服务器端出错";
          break;
        case 501:
          error.message = "网络未实现";
          break;
        case 502:
          error.message = "网络错误";
          break;
        case 503:
          error.message = "服务不可用";
          break;
        case 504:
          error.message = "网络超时";
          break;
        case 505:
          error.message = "http版本不支持该请求";
          break;
        default:
          error.message = `连接错误${error.response.status}`;
      }
    } else {
      // 超时处理
      if (JSON.stringify(error).includes("timeout")) {
        Message.error("服务器响应超时，请刷新当前页");
      }
      error.message("连接服务器失败");
    }

    Message.error(error.message);

    /* ****  处理结束  **** */
    // 如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response);
  }
);

// 4. 导入文件
export default service;

关于数据转换的说明

上述的代码都是请求的配置项，非必须，也是分情况的，data/headers/params 这种本身的参数都有多种，和后台沟通，需要什么就配什么！

👉 config.data = JSON.stringify(config.data)

使用JSON.stringify()还是qs.stringify()方法取决于你的后台想要的是json类型的传参还是需要传递字符串类型的参数。JSON.stringify() 方法将 JavaScript 对象转换为json类型的字符串。

qs.stringify()将对象序列化成URL的形式，以&进行拼接，也就是说qs转换会转换成为键值对拼接的字符串形式。

👉 const token = getCookie('名称')

这是token的取值，在取之前你肯定需要发请求拿到token，然后setCookie存起来，而名称就是你存的token的名称，每个人的不一样。

👉 config.headers = { 'Content-Type':'application/x-www-form-urlencoded' }

请求头内容的配置，也是不同的，application/x-www-form-urlencoded ：form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式），你可以根据实际情况去配置自己需要的；

写代码的过程是自己动脑去搭建工程的过程，希望给到大家一些启发：善于搜索，善于思考，善于总结；

另外，文章的知识点是你建立在，你对vue有一定基础上的，如果你没有相关的基础作为根基，还是建议大家去学习掌握基础知识后进行参考。

* Axios中的http.js

在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求方式的封装过程。

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    // 对象方法的简写get:function()(url,params){ ... }
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
//导出
export default http

在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。当一个项目中后台请求不是同一个IP地址，是多个IP地址的时候，可以在api文件夹下创建多个js文件，用来调用请求

// api.js有两种导出方式，分类导出和全部导出

// 分类导出
import http from '../utils/http'
/**
 *  @params resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "/testIp/request/"

// get请求
export function getListAPI(params){
    return http.get(`${resquest}/getList.json`,params)
}
// post请求
export function postFormAPI(params){
    return http.post(`${resquest}/postForm.json`,params)
}
// put 请求
export function putSomeAPI(params){
    return http.put(`${resquest}/putForm.json`,params)
}
// delete 请求
export function deleteListAPI(params){
    return http.delete(`${resquest}/deleteList.json`,params)
}

// 全部导出
import http from '../utils/http'
/**
 *  @params resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "/testIp/request/"

// get请求
export default{
 	getListAPI(params){
    	return http.get(`${resquest}/getList.json`,params)
	},
	postFormAPI(params){
    	return http.post(`${resquest}/postForm.json`,params)
	},
    putFormAPI(params){
    return http.put(`${resquest}/putForm.json`,params)
    },
    deleteListAPI(params){
    return http.delete(`${resquest}/deleteList.json`,params)
    }
}

以上封装完之后，接下来就是如何调用

调用

在Vue中调用接口

// 把api分类导入，用到哪个api 就调用哪个接口 ————适用于上面接口的分类导出
import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'

  methods: {
      // promise调用，链式调用， getList()括号内只接受参数；
      // get不传参
      getList() {
        getListAPI().then(res => console.log(res)).catch(err => console.log(err))
      },
	  // post传参
      postForm(formData) {
        let data = formData
        postFormAPI(data).then(res => console.log(res)).catch(err => console.log(err))
      },

      // async await同步调用
      async postForm(formData) {
        const postRes = await postFormAPI(formData)
        const putRes = await putSomeAPI({data: 'putTest'})
        const deleteRes = await deleteListAPI(formData.name)
        // 数据处理
        console.log(postRes);
        console.log(putRes);
        console.log(deleteRes);
      },
   }


// 把api全部导入，然后用到哪个api调用哪个api ————适用于全部导出
 import api from '@/api/api'
   methods: {
     getList() {
        api.getListAPI(data).then(res => {
        // 数据处理
        }).catch(err => console.log(err))
      }
    } 

🌳 参考资料

• Axios 中文文档 | Axios 中文网
• Aaxios的基础使用+进阶使用
• 教你在vue中如何封装axios
• 在vue中项目中封装axios
• Vue中使用axios的三种方式