目录

一、技术总结

1、技术概述

1.1使用场景

• 需要使用浏览器发送请求或者接收后端数据的时候使用。

1.2学习原因

• 1、Vue和React框架都更推荐使用Axios去发送请求。
• 2、轻量级请求库，它可以拦截请求和响应，并且相对Ajax等技术更方便上手。

1.3技术难点

• 需要搞清楚get和post等的多种请求方法的区别。

2、技术详述

2.1如何实现该技术

• 1、安装
  基于npm安装

  $ npm install axios
  

  基于bower安装

  $ bower install axios
  

  使用cdn

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

• 2、使用
  这里主要介绍四种Axios比较常用的语法，默认的、GET和POST，具体见以下2.2代码讲解。

2.2Axios代码讲解

• 第一种：默认的方法并且使用get请求

    axios({
        method:"GET", //填写请求类型方法
        url:"http://localhost:8085/xxxx" //填写请求地址
       }).then(res=>{ //返回promise对象，返回数据存储在res中
           console.log(res);
       }).catch((err) => {
        });
  

• 第二种：默认的方法并且使用post请求

    // 发送 POST 请求
    axios({
          method: 'post', //填写请求类型方法
          url: '/user/12345', //填写请求地址
          data: { //请求参数，采用键值对形式
            firstName: 'Fred',
            lastName: 'Flintstone'
          }
    }).then(res=>{     //返回promise对象，返回数据存储在res中
           console.log(res);
       }).catch((err) => {
        });
  

• 第三种：直接使用get请求

    axios.get("http://localhost:8085/xxxx") //如果有返回参数，需要跟在url后面
       .then(response=>{
           console.log(response);
       }).catch((err) => {
        });
  

• 第四种：直接使用post请求

    axios.post("http://localhost:8085/xxxx",
            {title:"axios学习2", //返回参数
            author:"Yehaocong2"})
         .then(res=>{
           console.log(res);
       }).catch((err) => {
        });
  

2.3Axios执行流程图描述

3、技术使用以及解决过程

• 问题描述一： 因为有时候GET也需要返回参数给服务器，但是我们默认规定的GET请求方法是没有含参的，所以导致容易将POST方法和GET方法弄混，这里讲解一种可以返回参数的GET请求方法。
• 解决过程：
  使用Axios的默认方法。

     axios({
        method: "get",
        url: "http://localhost:8085/backend/teacher/showComp",
        headers: { token: localStorage.token }, //请求头
        params: {
          competitionId: this.queryInfo.competeId, //参数名和返回内容
        },
      })
        .then((res) => { //200-300中间都会进入
          console.log(res);
          if (res.data.code == "200") { //判断返回状态码，
            console.log("res.data.data");
          }
        })
        .catch((err) => { //返回错误
        });

• 问题描述二： 有时候服务器需要更换，这时候Axios中的url的ip地址也需要随之更换，但是当我们发送请求的地方多起来后，更换就开始变得繁琐，没有很好的复用Axios的代码，这里讲解怎么封装Axios方法，方便使用。
• 解决过程：
  1、在main.js中引入依赖

  //request.js
  import axios from "axios";
  import qs from "qs";
  import app from "../main.js";
  

  2、创建Axios实例

  const service = axios.create({
  baseURL: process.env.BASE_URL,  // api的base_url
  timeout: 6000  // 请求超时时间
      });
  

  3、使用拦截器，进行统一配置

  service.interceptors.request.use(config => {
      config.method === 'post' //设置方法
      ? config.data = qs.stringify({...config.data}) //设置请求参数
      : config.params = {...config.params};
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
      return config;
  }, error => {  //请求错误处理
      //错误请求处理内容
  Promise.reject(error)});
  

  4、对响应进行统一处理

  service.interceptors.response.use(
  response => {  //成功请求到数据
      //这里根据后端提供的数据进行对应的处理
      if (response.data.data === '200') { //根据返回状态码进行处理
          return response.data;
      } else {
      }
  },
  error => {  //响应错误处理
      console.log(error); //错误响应内容放在error中
      let text = JSON.parse(JSON.stringify(error)).response.status === 404
          ? '404'
          : '网络异常，请重试';
      return Promise.reject(error)
  }
  );
  

  5、暴露Axios实例

  export default service; //service是实例名字
  

  6、调用Axios接口
  注意： post的请求参数放在data中，get请求参数放在params中。

  import service from './request' //引入Axios实例
  export const getCompetitionInfo = data => { //返回响应结果
  return service({
      url: '/backend/showCompitition', //省去了ip地址，只需要填写路径即可
      method: 'post',
      data{
      competitionID:this.ID,
      userID: this.userId
      }
  })
  };
  

4、总结

• 4.1、Axios特点

  • 1、基于promise的异步ajax请求库
  • 2、浏览器端/node端都可以使用
  • 3、支持请求/响应拦截器
  • 4、支持请求取消
  • 5、请求/响应数据转换
  • 6、批量发送多个请求

• 4.2 使用Axios需要注意的细节

  • 1、不要弄混get和post还有这两种默认方式的方法的使用，尤其是当get含参的时候，容易错用post的方法去发起get请求。
  • 2、当浏览器请求较多的时候，尽量封装Axios，暴露出Axios的实例，进行调用，防止需要更改url地址的时候产生混淆。
  • 3、如果对于Axios请求有不同的要求的时候，如baseUrl不同时，可以创建两个Axios实例，并暴露出去即可。

5、参考文献

1、Axios中文参考文档
2、Axios核心技术教程
3、Axios封装，使用拦截器统一处理接口，超详细的教程