[Axios]Axios快速入门

2021年11月20日 阅读数:3
这篇文章主要向大家介绍[Axios]Axios快速入门,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1.什么是Axios

Axios是基于promise的用于浏览器和nodejs的HTTP客户端的一个中间件。html

他能够实现从浏览器中建立XMLHttpRequest;从nodejs发出http请求;支持promiseAPI;拦截 请求和响应;转换请求和响应数据;取消请求;自动转换JSON数据;客户端支持防止CSRF/XSRF攻击等功能。前端

2.准备工做

json-servernode

咱们使用json-server这个模拟服务端接口数据的工具辅助测试,json-server就是一个存储了json格式的数据的一个本地模拟服务器。ios

npm install -g json-server

安装后咱们在项目文件夹下建立一个db.json,用来存储咱们要模拟的json格式的数据。npm

{
  "posts": [
    {
      "id": 1,
      "title": "长江七号",
      "author": "周星驰"
    },
    {
      "id": 2,
      "title": "c programming",
      "author": "tl"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    },
    {
      "body": "测试二号",
      "postId": 2,
      "id": 2
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

能够运行如下指令来开启一个虚假的服务器。json

json-server --watch db.json

axios的引入axios

安装api

npm install axios

使用script引入promise

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

3.Axios的基本使用

3.1 前端实现

咱们写一个简单的html网页,用于测试。浏览器

定义四个按钮,分别用来发送不一样类型的请求。

首先获取按钮,以后咱们为按钮绑定方法,这里的方法使用axios实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <title>Document</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn-primary">发送GET请求</button>
        <button class="btn-warning">发送POST请求</button>
        <button class="btn-success">发送PUT请求</button>
        <button class="btn-danger">发送DELETE请求</button>
    </div>
  <script>
      //获取按钮
      const btns = document.querySelectorAll('button');
      btns[0].onclick = function(){
          axios({
              method:'GET',
              url:'http://localhost:3000/posts/2'
          }).then(response =>{
              console.log(response);
          });
      }

      btns[1].onclick = function(){
          axios({
              method:'POST',
              url:'http://localhost:3000/posts',
              //设置请求体
              data:{
                  title:"今每天气不错",
                  author:"张三"
              }
          }).then(response =>{
              console.log(response);
          });
      }
      btns[2].onclick = function(){
          axios({
              method:'PUT',
              url:'http://localhost:3000/posts/3',
              //设置请求体
              data:{
                  title:"今每天气不错",
                  author:"李四"
              }
          }).then(response =>{
              console.log(response);
          });
      }
      btns[3].onclick = function(){
          axios({
              method:'DELETE',
              url:'http://localhost:3000/posts/3',
          }).then(response =>{
              console.log(response);
          });
      }
  </script>
</body>
</html>

3.2 API传入参数方式建立请求

能够看到,axios的API基本实现须要指定几个参数,

 axios({	  
 			  method:'GET', //指定使用的方法
 			  // 配置url 这里若是是delete等方法须要传入指定参数
              url:'http://localhost:3000/posts/3', 
          }).then(response =>{
              console.log(response);
          });

若有必要,能够设置传入的数据。

 axios({
              method:'POST',
              url:'http://localhost:3000/posts',
              //设置请求体
              data:{
                  title:"今每天气不错",
                  author:"张三"
              }
          }).then(response =>{
              console.log(response);
          });

3.3 直接执行请求

也能够让axios直接指定命令,执行请求

// 为给定 ID 的 user 建立请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地,上面的请求能够这样作
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3.4 设定Axios默认配置

 axios.defaults.method = 'GET';  //设置默认请求类型为GET
	 //设置url为'http://localhost:3000'
      axios.defaults.baseURL = 'http://localhost:3000'; 
      axios.defaults.params = {id:100}; //默认传入参数id:100
      axios.defaults.timeout = 3000; 

3.5 建立实例对象

能够经过实例对象的建立来实现一个Axios操做,这里定义了两个对象,经过get方法进行使用。

  	 //发送GET请求
      const btns = document.querySelectorAll('button');
      //建立实例对象
      const duanzi = axios.create({
        baseURL:'https://api.apiopen.top',
        timeout:3000
      });
      //这里duanzi与axios对象的功能几乎是同样的
      const another = axios.create({
        baseURL:'https://b.com',
        timeout:3000
      });
      console.log(duanzi)
    duanzi({
        url:'/getJoke'
      }).then(response =>{
      console.log(response);
    })
    duanzi.get('/getJoke').then(response =>{
      console.log(response.data)
    })

4.拦截器和错误处理

拦截器能够在发出请求或响应请求以前进行一些操做。

这里给出两个例子。

	// 设置请求拦截器
    axios.interceptors.request.use(function (config) {
      // Do something before request is sent
      console.log('请求拦截器 成功')
      // throw '参数出了问题'
      return config;
    }, function (error) {
      // Do something with request error
      console.log('请求拦截器 失败')
      return Promise.reject(error);
    });

    // 设置响应拦截器
    axios.interceptors.response.use(function (response) {
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      console.log('响应拦截器 成功')
      return response;
    }, function (error) {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      console.log('响应拦截器 失败')
      return Promise.reject(error);
    });


    //发送请求
    axios({
      method:'GET',
      url:'http://localhost:3000/posts'
    }).then(response =>{
      console.log(response)
    }).catch(response =>{
      console.log('回调失败')
    })

运行后,能够获得

若是咱们在请求拦截器中throw一个错误,那么会发生

5.取消请求

咱们能够在请求发出后对请求进行取消,首先设置json-server一个延迟,方便咱们取消。

json-server --watch db.json -d 2000

给出一个取消案例。

<body>
  <div class="container">
    <h2 class="page-header">取消请求</h2>
    <button class="btn-primary">发送请求</button>
    <button class="btn-warning">取消请求</button>

  </div>
  <script>
    //发送GET请求
    //获取按钮
    const btns = document.querySelectorAll('button');
    //2.声明全局变量
    let cancel = null;
    btns[0].onclick = function () {
      //检测上一次请求是否已经完成 
      if (cancel !== null) {
        cancel();
      }
      axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        //1.添加配置对象的属性
        cancelToken: new axios.CancelToken(function (c) {
          //3.将c的值赋值给cancel
          cancel = c;


        })
      }).then(response => {
        console.log(response);
        //将cancel初始化 cancel==null表示请求已完成
        cancel = null;
      })


    }
    //取消请求
    btns[1].onclick = function () {
      cancel();

    }

  </script>
  </body>

使用

cancelToken: new axios.CancelToken(function (c) {})

这样一个参数,去配置取消的操做。