Axios使用方法详解，从入门到进阶_Javascript

为什么会诞生axios？说到axios我们就不得不说下ajax。最初的旧浏览器页面在向服务器请求数据时，由于返回的是整个页面的数据，所以整个页面都会强制刷新一下，这对于用户来讲并不是很友好。因为当我们只需要请求部分数据时，服务器返回给我们的确是整个页面的数据，这样会造成网络资源的占用，即十分消耗网络资源。为了提高数据请求效率，异步网络请求ajax就应运而生了，它可以在页面无刷新的情况下请求数据。因此，这样一来，当我们只是需要修改页面的部分数据时，可以实现不刷新页面的功能。

🌳 axios的介绍

定义

axios是一个基于promise 的 http 库（类似于jquery的ajax，用于http请求），可以用在浏览器和 node.js中（既可以用于客户端也可以用于node.js编写的服务端）。

原理

axios（ajax i/o system）不是一种新技术，本质上也是对原生xhr（xmlhttpreques）的封装，只不过它是基于promise的，是promise的实现版本，符合最新的es规范。

特性

从浏览器创建 xmlhttprequests请求
从node.js创建http请求
支持 promise api
拦截请求和响应，比如：在请求前添加授权和响应前做一些事情。
转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
取消请求
自动转换json数据
客户端支持防御xsrf

浏览器支持情况

firefox、chrome、safari、opera、edge、ie8+

如何安装

5种安装方式

使用npm安装

$ npm install axios

使用安装

$ bower install axios

使用 yarn安装

$ yarn add axios

使用 jsdelivr cdn

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

🌳 axios的使用

◼️ 创建vue项目

我们以在vue中使用axios为例

在电脑硬盘里，新建项目文件夹，使用vscode打开项目文件夹，在项目文件夹下，右键选择“在集成终端中打开”，打开终端。（当然，你也可以通过在项目文件夹目录的路径地址栏中输入cmd，按回车，打开命令行窗口进行创建vue项目）

现在，我们开始创建一个vue项目：vue create axios-vue，选择自定义配置manually select features，终端显示如下：上下键切换，空格键选择对应配置。

然后，依次选择完成余下的配置

运行终端指令 cd axios-vue 、npm run serve启动项目后，运行终端指令npm install axios安装axios，至此，项目创建完成，axios安装完成。

在项目的public文件夹下新建data.json文件，用于模拟数据。在组建中引入axios，并发起请求。

项目结构，如下：

* app.vue组件

<template>
  <div id="app">
    <img alt="vue logo" src="./assets/logo.png">
    <helloworld></helloworld>
  </div>
</template>

<script>
import helloworld from './components/helloworld.vue'

export default {
  name: 'app',
  components: {
    helloworld
  }
}
</script>

<style>
#app {
  font-family: avenir, helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

* index.html文件

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= base_url %>favicon.ico">
    <title><%= htmlwebpackplugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

* data.json文件

{
    "title":"vue project",
    "create_time":"2023-02-13"
}

* helloworld.vue组件

在组件中，引入axios并使用，就构建了一个基本的get请求，axios请求的结果无论成功与否都会返回一个promise对象，因此，接着调用then方法即可查看请求的结果了。

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    axios
      .get("/data.json")
      .then((result) => {
        // result不是直接的返回结果
        console.log(result);
        // result.data才是真正的返回结果
        console.log(result.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>...</style>

此时，已经可以请求到数据了，效果如下：

◼️ axios的基础用法（get、post、put 等请求方法）

axios常用的几种请求方法：get，post，put，patch，delete

get：一般用于获取数据
post：一般用于提交数据（表单提交与文件上传）
patch：更新数据（只将修改的数据推送到后端（服务端））
put：更新数据（所有数据推送到服务端）
delete：删除数据

get方法

方式一：请求别名的使用

axios.get(url[, config]) 用于获取数据

如果不带有参数，代码如下：

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    axios
      .get("/data.json")
      .then((result) => {
        // result不是直接的返回结果
        console.log("数据：",result);
        // result.data才是真正的返回结果
        console.log("真正的数据：",result.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

如果带有参数，代码如下：

<script>
  import axios from "axios";
  export default {
    name: "helloworld",
    created() {
      // 第一种方式：将参数直接写在url中
      // 向给定id的用户发起请求
      axios
        .get("/data.json?id=5")
        .then((result) => {
          // 处理成功情况
          console.log(result);
        })
        .catch((err) => {
          // 处理错误情况
          console.log(err);
        });
       

      // 第二种方式：将参数直接写在params中
      axios
        .get("/data.json", {
          //带参数时  ————若无参数时直接省略params对象不写
          params: {
            id: 5,
          },
        })
        .then((result) => {
          // result不是直接的返回结果
          console.log("数据：", result);
          // result.data才是真正的返回结果
          console.log("真正的数据：", result.data);
        })
        .catch((err) => {
          console.log(err);
        });

      // 支持async/await用法
      // axios 是一个基于 promise 网络请求库, 这意味着, 你必须使用 es6 的 then() 或者 es8 的 async/await 来处理 promise 实例对象。
      // 注意: 由于async/await 是ecmascript 2017中的一部分，而且在ie和一些旧的浏览器中不支持，所以使用时务必要小心。

      async function getuser() {
        try {
          const response = await axios.get("/user?id=12345");
          console.log(response);
        } catch (error) {
          console.error(error);
        }
      }
    },
  };
</script>

方式二：通过来创建请求

如果不带参数，代码如下：

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    axios({
      method: "get",
      url: "/data.json"
    }).then((res) => {
      // result不是直接的返回结果
      console.log("数据：", result);
      // result.data才是真正的返回结果
      console.log("真正的数据：", result.data);
    });
  },
};
</script>

如果带有参数，代码如下：

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    axios({
      method: "get",
      url: "/data.json",
      //带参数时  ————若无参数时直接省略params对象不写
      params: {
        id: 5,
      },
    }).then((result) => {
      // result不是直接的返回结果
      console.log("数据：", result);
      // result.data才是真正的返回结果
      console.log("真正的数据：", result.data);
    });
  },
};
</script>

了解一下浏览器控制台相关的请求信息：

request url：请求url

request method：请求方式

status code：状态码

request header：请求头 ——view parsed模式

user-agent：产生请求的浏览器类型。

accept：客户端可识别的内容类型列表。

host：请求的主机名。

query string parameters：查询字符串参数

附：请求头 request header ——view source模式——源码模式（点击view source进入）

post方法

post请求常用的数据请求格式有三种：

下面，我们简单了解一下http的post请求的三种类型 👇

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

<script>
import axios from "axios";
import qs from 'qs';

export default {
  name: "helloworld",
  created() {
    // 对象data的属性名uname和upwd引号可加可不加
    let data = {uname:"dingding",upwd:"123456"};
    
    axios.post("/date.json",qs.stringify({ data }))
    .then(res=>{
        console.log(res);            
    })
  },
};
</script>
<style scoped>
</style>

content-type和参数：

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    let data = {uname: "dingding", upwd: 123456};
    let formdata = new formdata();
    for (let key in data) {
      formdata.append(key, data[key]);
    }
    console.log(formdata);

    axios.post("/date.json", formdata).then((res) => {
      console.log(res.data);
    });
  },
};
</script>
<style scoped>
</style>

content-type和参数：

方式一：请求别名的使用

axios.post(url[, data[, config]]) 用于发送数据 `data`对象是作为请求主体被发送的数据

axios发送post无参请求，代码如下：

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    //把get无参请求的get改为post即可
    axios.post("/data.json").then(res=>{
      console.log(res)
    });
  },
};
</script>

<style scoped>...</style>

axios发送post有参请求，2种传参形式，代码如下：

① 查询字符串形式

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    //发送post请求携带参数，直接使用"uname=dingding&upwd=123456"
    axios.post("/data.json", "uname=dingding&upwd=123456").then(res=>{
      console.log(res)
    });
  },
};
</script>

<style scoped>...</style>

② 对象形式

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    //发送post请求携带参数，这种传参方式后台得使用requestbody处理
    axios.post("/data.json", {uname:"dingding",upwd:123456}).then(res=>{
      console.log(res)
    });
  },
};
</script>

<style scoped>...</style>

方式二：通过向axios传递相关配置来创建请求

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
     let data = {uname:"dingding",upwd:123456};
     axios({
       method:'post',
       url:'/data.json',
       // 与get请求使用params不同的是，post请求使用data属性
       data:data
     }).then(res=>{
       console.log(res)
    })
  },
};
</script>

<style scoped>...</style>

content-type和参数：

put和patch方法

let data = {uname:"dingding",upwd:123456};
// axios.put(url[, data[, config]]) 用法同post类似，用于修改数据 
axios.put("/data.json", data).then(res=>{
  console.log(res)
});


let data = {uname:"dingding",upwd:123456};
// axios.patch(url[, data[, config]]) 用法同post类似，用于修改数据 
axios.patch("/data.json", data).then(res=>{
  console.log(res)
});

delete方法

axios.delete(url[, config])与axios.get(url[, config])用法基本相似，但是作用不同，它用于删除数据，同get方法一样也可以有几种写法。

delete请求有时候需要把参数拼接到url上，有时候像post请求那样把参数放在请求体里面。至于具体怎么调用，需要和后端商量好！

方式一：get - params

方式二：post - data

使用类似post请求方式，把axios.delete()中的params改为data，这样请求会把内容放入请求体里面

// 使用别名法
// data
axios
  .delete("/data.json", {
    data: {
      id: 5
    }
  })
  .then(res => {
    console.log(res);
  });
  
// 不使用别名法 ————通过传递相关配置创建请求
let data = {
  id: 5
};
axios({
  method:'delete',
  url:'/data.json',
  data:data
}).then(res=>{
  console.log(res)
})

并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。

在例子中，我们使用axios.all()，对data.json/city.json同时进行请求，使用axios.spread()，对返回的结果分别进行处理。代码如下：

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

<script>
import axios from "axios";
export default {
  name: "helloworld",
  created() {
    // 并发请求
    // 并发请求用到了axios的两个方法：axios.all('参数是一个数组')、axios.spread('回调函数')
    axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
      axios.spread((datares, cityres) => {
        console.log(datares, cityres);
      })
    );
  },
};
</script>
<style scoped>
</style>

注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理即可。

并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

◼️ axios进阶用法（实例、配置、拦截器、取消请求等）

1、axios实例的创建与配置

👉 axios实例的创建

比如：后端接口地址有多个（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>

👉 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

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);
  });

示例2：

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

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

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网络请求函数

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);
}

（2）实用示例

◾ 实用举例a：登录权限

需要token的接口实例

    // 需要token的接口
    let instance = axios.create({});
    instance.interceptors.request.use(config=>{
        config.headers.token = '';
     //这种写法会覆盖掉headers中的其他参数，导致headers中只包含token这一个参数，所以不建议这种写法
     // config.headers = {
     //       token: ''
     // }
        return config
    }, err => {
      return promise.reject(err);
    })

不需要token的接口实例

    // 不需要token接口
    let newinstance = axios.create({});

◾ 实用举例b：移动端开发数据加载loading动画

    // 请求时加载loading动画
    let instance_phone = axios.create({});
    instance_phone.interceptors.request.use(config=>{
        $('#loading').show();
        return config
    }, err => {
      return promise.reject(err);
    })

    instance_phone.interceptors.response.use(res=>{
        $('#loading').hide();
        return res
    }, err => {
      return promise.reject(err);
    })

❌ 错误处理

结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行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、取消请求（不常用，了解）

代码示例

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

应用场景

◼️ 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": "/"
                    }
                },
            }
        }

* request.js

/****   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;

* axios中的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

* axios中的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使用方法详解，从入门到进阶

2024年07月28日 • Javascript •我要评论

🌳 axios的诞生

🌳 axios的介绍

定义

原理

特性

浏览器支持情况

如何安装

🌳 axios的使用

◼️ 创建vue项目

◼️ axios的基础用法（get、post、put 等请求方法）

get方法

post方法

put和patch方法

delete方法

并发请求

◼️ axios进阶用法（实例、配置、拦截器、取消请求等）

1、axios实例的创建与配置

2、拦截器

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

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

代理

调用

🌳 参考资料

相关文章:

五大跨平台桌面应用开发框架：Electron、Tauri、Flutter等

【微服务】第29节： ElasticSearch的 RestClient查询&数据耦合

谈谈运维稳定性_关于平台稳定性运维，2024年最新2024最新大厂高频微服务面试总结

每天花四小时看这些微服务、高性能架构、开源框架、分布式高并发(1)

发表评论


验证码：