axios基本介绍与使用

json-serve使用介绍

在介绍axios之前我们得先去了解json-server，这个是可以把本地作为服务器，然后axios再去向本地发起请求，模拟工作环境，当然在日常工作中，若是需要等待后端接口完成前，我们也可以用这个先进行假数据得处理。

json-service的开源地址：

https://github.com/typicode/json-server

json-server安装

1、首先安装依赖

npm install -g json-server

2、创建专属文件夹，然后在文件夹中创建db.json文件，文件内容如下：

{
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" }
  }

上面的posts、comments、profile都是接口请求的数据

3、启动服务器，注意需要在专属文件夹里面去运行

json-server --watch db.json

若是没报错也没成功，则运行 json-server db.json

在启动成功后会出现如图的样式，其中的地址就是本地可以调用的接口地址了

成功后我们再去进行axios的安装与配置

axios的基本介绍

axios是基于promise进行封装的一个库，所以建议先去了解promise相关的知识，才好更好的去消化axios的知识内容，关于promise的介绍在这篇博客中有https://blog.csdn.net/qq_43376559/article/details/122012915

axios的安装方式

1、npm安装

npm install axios

2、yarn安装

yarn add axios

3、CND方式引入

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

axios的特点

1、HTTP请求是从node.js中发出

2、支持所有的promise的API

3、自带请求拦截和响应拦截

4、可以取消请求

5、自动转换为JSON数据格式

6、可以预防XSRF攻击

axios的基本使用

axios对象

axios({
   method: '方式'，
   
   url: '请求地址',
   
   baseURL:'请求地址的基础值'
   
   data: {
   
   }，
   transformRequest:[function(data,headers){ //将请求的数据做出处理，返回给服务器
   return data
   }]，
   
   transformResponse: 对响应的数据做出预处理。
   
   headers:[],对请求头信息做出控制，
   
   params: { // 就是url地址栏上的参数
    id:123
   }
   
})

 let result = await axios({
              method: e,
              url: "/posts",
              baseURL: "http://localhost:3000/",
              data: {
                title: "要想学的好就得手写代码",
                author: "赵铭",
              },
            });

axios.create方法

 //axios创建实列对象发送ajax请求

        let resulte = axios.create({
          baseURL: "http://localhost:3000/",
          timeout: 2000,
        });

        //上面的reulte功能和axios对象基本一致
        resulte({
          url: "/posts",
          method: e,
        });

        console.log(resulte);

axios中的get、post等方法

axios.get('url',{data})

post、delete、put都是这样用

axios拦截器

接受两个函数参数

第一个函数参数返回为拦截成功的，同时返回传入值，也可以在函数内写一些条件

第二个参数是错误时的情况，直接调用Promise中的reject

拦截器就是一些函数，分为请求拦截器、响应拦截器

执行顺序是请求拦截器的回调>响应拦截器的回调>自己拦截器的回调

      //请求拦截
      axios.interceptors.request.use(
        (config) => {
          console.log("请求拦截成功", config);
          
          
          //注意，这里要是抛出异常的话，在响应拦截、自身的回调放啊中就不会走成功的回调
          throw "参数格式失败";
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );

      //响应拦截
      axios.interceptors.response.use(
        (response) => {
          console.log("成功的回调", response);
          return response;
        },
        (error) => {
          //请求结果抛出异常就会走这里
          console.log("11");
          return Promise.reject(error);
        }
      );

请求拦截器中的conifg参数，就是请求的配置对象，在请求拦截的过程中可以去再一次进行配置，

响应拦截器中的第一个回调函数的参数就是服务器响应回来的数据，也可以进行数据的预处理

  axios.defaults.baseURL = "http://localhost:3000/";

      //请求拦截
      axios.interceptors.request.use(
        (config) => {
          console.log("请求拦截成功", config);
          config.params = { id: 7 };
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );

      //响应拦截
      axios.interceptors.response.use(
        (response) => {
          console.log("成功的回调", response);
          let data = response.data;
          return data;
        },
        (error) => {
          //请求结果抛出异常就会走这里
          console.log("11");
          return Promise.reject(error);
        }
      );

axios取消请求

是配置对象config中的CancelToken方法，其中的参数是一个函数参数，同时new出的构造对象也自带promise（源码分析中有）

    <script>
      axios.defaults.baseURL = "http://localhost:3000/";
      let temp = null;
      function hand1(e) {
        if (temp !== null) {
          temp();
        }
        axios({
          method: e,
          URL: "/profile",
          cancelToken: new axios.CancelToken((v) => {
            temp = v;
          }),
        }).then((v) => {
          console.log(v);
          temp = null;
        });
      }

      function hand2() {
        temp();
      }
    </script>