axios:功能强大的网络请求库（黑马程序员）

1.基础参数

axios 可用 async/await 修饰

  1. //引入axios
  2. <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> 
  4. //then回调函数：第一个在请求响应完成时触发，第二个在请求失败时触发
  5. //get(地址?查询字符串)
  6. axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
  7. //get(地址，{params:{key:value, key2:value2}})
  8. //axios.get(地址,{
  9. //    params:{
  10. //        key:value,
  11. //        key2:value2
  12. //    }
  13. //}).then(function(response){},function(err){})
  16. //delect 与 get 类似
  18. //post(地址，参数对象)
  19. axios.post(地址，{key:value,key2:value2}).then(function(response){},function(err){})
  20. //var params=new URLSearchParams();
  21. //params.append("key","value");
  22. //params.append("key2","value2");
  23. //axios.post(地址,params).then(function(response){},function(err){})
  27. //put 与 post 类似
  1. axios 的响应结果
  2. data : 实际响应回来的数据
  3. header : 响应头信息
  4. status : 响应状态码
  5. statusText : 响应状态信息

axios全局配置

axios.default.timeout=3000; //设置超时时间
axios.default.baseURL=’http://localhost:3000/api‘; //设置默认地址
axios.default.header[“token”]=”qwerasdf123”; //设置请求头token

2.axios 拦截器

应用场景：

  • 1：每个请求都带上的参数，比如token，时间戳等。
  • 2：对返回的状态进行判断，比如token是否过期

请求拦截器

  1. // 请求拦截器
  2. axios.interceptors.request.use(
  3.   config => {
  4.     // 每次发送请求之前判断vuex中是否存在token
  5.     // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
  6.     // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
  7.     const token = window.localStorage.getItem("token");
  8.     token && (config.headers.Authorization = token);
  9.     return config;
  10.   },
  11.   error => {
  12.     return Promise.error(error);
  13.   }
  14. );

响应拦截器

  1. //响应拦截器
  2. axios.interceptors.response.use(
  3.   response => {
  4.     // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  5.     // 否则的话抛出错误
  6.     if (response.status === 200) {
  7.       return Promise.resolve(response);
  8.     } else {
  9.       return Promise.reject(response);
  10.     }
  11.   },
  12.   // 服务器状态码不是2开头的的情况
  13.   // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  14.   // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  15.   // 下面列举几个常见的操作，其他需求可自行扩展
  16.   error => {
  17.     if (error.response.status) {
  18.       switch (error.response.status) {
  19.         // 401: 未登录
  20.         // 未登录则跳转登录页面，并携带当前页面的路径
  21.         // 在登录成功后返回当前页面，这一步需要在登录页操作。
  22.         case 401:
  23.           vant.Toast.fail("身份验证失败，请关闭重新进入。");
  24.           break;
  26.         // 403 token过期
  27.         // 登录过期对用户进行提示
  28.         // 清除本地token和清空vuex中token对象
  29.         // 跳转登录页面
  30.         case 403:
  31.           vant.Toast.fail("登录过期，请关闭重新进入。");
  32.           // 清除token
  33.           break;
  35.         // 404请求不存在
  36.         case 404:
  37.           vant.Toast.fail("您访问的网页不存在。");
  38.           break;
  39.         // 其他错误，直接抛出错误提示
  40.         default:
  41.           vant.Toast.fail(error.response.data.message);
  42.       }
  43.       return Promise.reject(error.response);
  44.     }
  45.   }
  46. );

3.测试接口（可自行使用其他接口）

随机获取笑话的接口

| num | 笑话条数 | 类型为数字 |

用户注册的接口

| username | 用户名 | 不能为空 |

4.具体小案例

  1.     <input type="button" value="get请求" class="get">
  2.     <input type="button" value="post请求" class="post">
  3.     <!-- 引入axios -->
  4.     <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  6.     <script>
  7.         //get点击事件
  8.         document.querySelector(".get").onclick = function () {
  9.             axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response) {
  10.                 console.log(response);
  11.             }, function (err) {
  12.                 console.log("错误：" + err);
  13.             })
  14.         };
  16.         // post点击事件
  17.         document.querySelector(".post").onclick = function () {
  18.             axios.post("https://autumnfish.cn/api/user/reg", { username: "jack" }).then(function (response) {
  19.                 console.log(response);
  20.             }, function (err) {
  21.                 console.log("错误：" + err);
  22.             })
  23.         }
  24.     </script>

5.axios + vue

注意： axios 中的 this 已经改变，无法拿到 data 中的数据，故使用 that

  1. <div id="app">
  2.         <input @click="getJoke" type="button" value="获取笑话">
  3.         <p>{{ joke }}</p>
  4.     </div>
  7.     <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  8.     <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  9.     <script>
  10.         var app = new Vue({
  11.             el: "#app",
  12.             data: {
  13.                 joke: "一个笑话"
  14.             },
  15.             methods: {
  16.                 getJoke: function () {
  17.                     // console.log(this.joke);
  18.                     var that = this;
  19.                     axios.get("https://autumnfish.cn/api/joke").then(function (response) {
  20.                         // console.log(response.data);
  21.                         //axios中的this已经改变，无法拿到data中的数据，故使用that
  22.                         // console.log(this.joke);
  23.                         that.joke = response.data;
  24.                     }, function (err) {
  25.                         console.log("错误：" + err);
  26.                     })
  27.                 }
  28.             }
  29.         })
  30.     </script>